support Dropdown
support Dropdown
This commit is contained in:
梁灏
parent
1c803cdfb0
commit
b1c118d85e
10 changed files with 91 additions and 48 deletions
|
|
@ -29,3 +29,8 @@ class 改为了 className
|
|||
### Tabs
|
||||
废弃 activeKey，改用 value，使用 v-model，key 更名为 name
|
||||
### popper.js 将 prop: visible 移至 data 里
|
||||
### Slider
|
||||
支持 v-model
|
||||
### Dropdown
|
||||
DropdownItem key 改为 name, Dropdown 的 visible 要使用 @on-visible-change 捕获，不再 sync
|
||||
DropdownItem 里，this.$parent.$parent 与1.0 有区别
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
- [x] Switch
|
||||
- [ ] Table
|
||||
- [ ] Select
|
||||
- [ ] Slider
|
||||
- [x] Slider
|
||||
- [ ] DatePicker
|
||||
- [ ] TimePicker
|
||||
- [ ] Cascader
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
- [x] Tree
|
||||
- [ ] Menu
|
||||
- [x] Tabs
|
||||
- [ ] Dropdown
|
||||
- [x] Dropdown
|
||||
- [ ] Page
|
||||
- [ ] Breadcrumb
|
||||
- [x] Steps
|
||||
|
|
|
|||
|
|
@ -5,8 +5,9 @@
|
|||
const prefixCls = 'ivu-dropdown-item';
|
||||
|
||||
export default {
|
||||
name: 'DropdownItem',
|
||||
props: {
|
||||
key: {
|
||||
name: {
|
||||
type: [String, Number]
|
||||
},
|
||||
disabled: {
|
||||
|
|
@ -36,7 +37,7 @@
|
|||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
const $parent = this.$parent.$parent;
|
||||
const $parent = this.$parent.$parent.$parent;
|
||||
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
|
||||
|
||||
if (this.disabled) {
|
||||
|
|
@ -50,7 +51,7 @@
|
|||
$parent.$emit('on-hover-click');
|
||||
}
|
||||
}
|
||||
$parent.$emit('on-click', this.key);
|
||||
$parent.$emit('on-click', this.name);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
v-clickoutside="handleClose"
|
||||
@mouseenter="handleMouseenter"
|
||||
@mouseleave="handleMouseleave">
|
||||
<div :class="[prefixCls-rel]" v-el:reference @click="handleClick"><slot></slot></div>
|
||||
<Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
|
||||
<div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
|
||||
<transition :name="transition">
|
||||
<Drop v-show="currentVisible" :placement="placement" ref="drop"><slot name="list"></slot></Drop>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -44,16 +46,30 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls
|
||||
prefixCls: prefixCls,
|
||||
currentVisible: this.visible
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
this.currentVisible = val;
|
||||
},
|
||||
currentVisible (val) {
|
||||
if (val) {
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
this.$emit('on-visible-change', val);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleClick () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
if (this.trigger !== 'click') {
|
||||
return false;
|
||||
}
|
||||
this.visible = !this.visible;
|
||||
this.currentVisible = !this.currentVisible;
|
||||
},
|
||||
handleMouseenter () {
|
||||
if (this.trigger === 'custom') return false;
|
||||
|
|
@ -62,7 +78,7 @@
|
|||
}
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.visible = true;
|
||||
this.currentVisible = true;
|
||||
}, 250);
|
||||
},
|
||||
handleMouseleave () {
|
||||
|
|
@ -72,7 +88,7 @@
|
|||
}
|
||||
clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
this.visible = false;
|
||||
this.currentVisible = false;
|
||||
}, 150);
|
||||
},
|
||||
handleClose () {
|
||||
|
|
@ -80,7 +96,7 @@
|
|||
if (this.trigger !== 'click') {
|
||||
return false;
|
||||
}
|
||||
this.visible = false;
|
||||
this.currentVisible = false;
|
||||
},
|
||||
hasParent () {
|
||||
const $parent = this.$parent.$parent;
|
||||
|
|
@ -91,44 +107,63 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
this.$refs.drop.update();
|
||||
} else {
|
||||
this.$refs.drop.destroy();
|
||||
}
|
||||
this.$emit('on-visible-change', val);
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-click' (key) {
|
||||
mounted () {
|
||||
this.$on('on-click', (key) => {
|
||||
const $parent = this.hasParent();
|
||||
if ($parent) $parent.$emit('on-click', key);
|
||||
},
|
||||
'on-hover-click' () {
|
||||
});
|
||||
this.$on('on-hover-click', () => {
|
||||
const $parent = this.hasParent();
|
||||
if ($parent) {
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'custom') return false;
|
||||
this.visible = false;
|
||||
this.currentVisible = false;
|
||||
});
|
||||
$parent.$emit('on-hover-click');
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'custom') return false;
|
||||
this.visible = false;
|
||||
this.currentVisible = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
'on-haschild-click' () {
|
||||
});
|
||||
this.$on('on-haschild-click', () => {
|
||||
this.$nextTick(() => {
|
||||
if (this.trigger === 'custom') return false;
|
||||
this.visible = true;
|
||||
this.currentVisible = true;
|
||||
});
|
||||
const $parent = this.hasParent();
|
||||
if ($parent) $parent.$emit('on-haschild-click');
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// events: {
|
||||
// 'on-click' (key) {
|
||||
// const $parent = this.hasParent();
|
||||
// if ($parent ) $parent.$emit('on-click', key);
|
||||
// },
|
||||
// 'on-hover-click' () {
|
||||
// const $parent = this.hasParent();
|
||||
// if ($parent) {
|
||||
// this.$nextTick(() => {
|
||||
// if (this.trigger === 'custom') return false;
|
||||
// this.currentVisible = false;
|
||||
// });
|
||||
// $parent.$emit('on-hover-click');
|
||||
// } else {
|
||||
// this.$nextTick(() => {
|
||||
// if (this.trigger === 'custom') return false;
|
||||
// this.currentVisible = false;
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// 'on-haschild-click' () {
|
||||
// this.$nextTick(() => {
|
||||
// if (this.trigger === 'custom') return false;
|
||||
// this.currentVisible = true;
|
||||
// });
|
||||
// const $parent = this.hasParent();
|
||||
// if ($parent) $parent.$emit('on-haschild-click');
|
||||
// }
|
||||
// }
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
data () {
|
||||
return {
|
||||
popper: null,
|
||||
width: '',
|
||||
width: ''
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
});
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.popper = new Popper(this.$parent.$els.reference, this.$el, {
|
||||
this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
|
||||
gpuAcceleration: false,
|
||||
placement: this.placement,
|
||||
boundariesPadding: 0,
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
popper._popper.style.transformOrigin = `center ${ origin }`;
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
created () {
|
||||
this.$on('on-update-popper', this.update);
|
||||
this.$on('on-destroy-popper', this.destroy);
|
||||
},
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@
|
|||
const prefixCls = 'ivu-slider';
|
||||
|
||||
export default {
|
||||
name: 'Slider',
|
||||
components: { InputNumber, Tooltip },
|
||||
props: {
|
||||
min: {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import Checkbox from './components/checkbox';
|
|||
import Circle from './components/circle';
|
||||
import Collapse from './components/collapse';
|
||||
// import DatePicker from './components/date-picker';
|
||||
// import Dropdown from './components/dropdown';
|
||||
import Dropdown from './components/dropdown';
|
||||
// import Form from './components/form';
|
||||
import Icon from './components/icon';
|
||||
import Input from './components/input';
|
||||
|
|
@ -64,9 +64,9 @@ const iview = {
|
|||
CheckboxGroup: Checkbox.Group,
|
||||
iCircle: Circle,
|
||||
// DatePicker,
|
||||
// Dropdown,
|
||||
// DropdownItem: Dropdown.Item,
|
||||
// DropdownMenu: Dropdown.Menu,
|
||||
Dropdown,
|
||||
DropdownItem: Dropdown.Item,
|
||||
DropdownMenu: Dropdown.Menu,
|
||||
// iForm: Form,
|
||||
// FormItem: Form.Item,
|
||||
iCol: Col,
|
||||
|
|
|
|||
|
|
@ -38,6 +38,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/tooltip">Tooltip</router-link></li>
|
||||
<li><router-link to="/poptip">Poptip</router-link></li>
|
||||
<li><router-link to="/slider">Slider</router-link></li>
|
||||
<li><router-link to="/dropdown">Dropdown</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -116,6 +116,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/slider',
|
||||
component: require('./routers/slider.vue')
|
||||
},
|
||||
{
|
||||
path: '/dropdown',
|
||||
component: require('./routers/dropdown.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<Dropdown trigger="click">
|
||||
<Dropdown>
|
||||
<a href="javascript:void(0)">
|
||||
北京小吃
|
||||
<Icon type="arrow-down-b"></Icon>
|
||||
|
|
@ -24,10 +24,6 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
v (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue