drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

support Dropdown

Browse source 
support Dropdown
This commit is contained in:
梁灏 2017-03-03 17:46:09 +08:00
parent 1c803cdfb0
commit b1c118d85e
10 changed files with 91 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/dropdown/dropdown-item.vue
View file

@ -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);
}
}
};

93
src/components/dropdown/dropdown.vue
View file

@ -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' () {
if ($parent) $parent.$emit('on-click', key);
});
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>