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

update Dropdown

Browse source 
update Dropdown
This commit is contained in:
梁灏 2016-12-04 17:04:48 +08:00
parent 6b71ba9418
commit 407eabd5c3
3 changed files with 126 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -38,6 +38,7 @@
handleClick () { handleClick () {
const $parent = this.$parent.$parent; const $parent = this.$parent.$parent;
const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown'; const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
if (this.disabled) { if (this.disabled) {
this.$nextTick(() => { this.$nextTick(() => {
$parent.visible = true; $parent.visible = true;

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

@ -1,12 +1,14 @@
<template> <template>
<div <div
:class="[prefixCls]" :class="[prefixCls]"
@click="handleClick" v-clickoutside="handleClose"
@mouseenter="handleMouseenter" @mouseenter="handleMouseenter"
@mouseleave="handleMouseleave" @mouseleave="handleMouseleave">
v-clickoutside="handleClose"> <div
<div :class="[prefixCls-rel]" v-el:reference><slot></slot></div> :class="[prefixCls-rel]"
<Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop><slot name="list"></slot></Drop> 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> </div>
</template> </template>
<script> <script>
@ -34,6 +36,11 @@
default: 'bottom' default: 'bottom'
} }
}, },
computed: {
transition () {
return ['bottom-start', 'bottom', 'bottom-end'].indexOf(this.placement) > -1 ? 'slide-up' : 'fade';
}
},
data () { data () {
return { return {
prefixCls: prefixCls, prefixCls: prefixCls,
@ -92,14 +99,20 @@
events: { events: {
'on-click' (key) { 'on-click' (key) {
const $parent = this.hasParent(); const $parent = this.hasParent();
if ($parent ) $parent.$emit('on-click', key) if ($parent ) $parent.$emit('on-click', key);
}, },
'on-hover-click' () { 'on-hover-click' () {
const $parent = this.hasParent();
if ($parent) {
this.$nextTick(() => { this.$nextTick(() => {
this.visible = false; this.visible = false;
}); });
const $parent = this.hasParent(); $parent.$emit('on-hover-click');
if ($parent) $parent.$emit('on-hover-click'); } else {
this.$nextTick(() => {
this.visible = false;
});
}
}, },
'on-haschild-click' () { 'on-haschild-click' () {
this.$nextTick(() => { this.$nextTick(() => {

28
test/routers/dropdown.vue
View file

@ -1,4 +1,31 @@
<template> <template>
<Card>
<Dropdown>
<a href="javascript:void(0)">
hover 触发
<Icon type="arrow-down-b"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown-item>炸酱面</Dropdown-item>
<Dropdown-item>豆汁儿</Dropdown-item>
<Dropdown-item>冰糖葫芦</Dropdown-item>
<Dropdown-item>北京烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown>
<Dropdown trigger="click" style="margin-left: 20px">
<a href="javascript:void(0)">
click 触发
<Icon type="arrow-down-b"></Icon>
</a>
<Dropdown-menu slot="list">
<Dropdown-item>驴打滚</Dropdown-item>
<Dropdown-item>炸酱面</Dropdown-item>
<Dropdown-item>豆汁儿</Dropdown-item>
<Dropdown-item>冰糖葫芦</Dropdown-item>
<Dropdown-item>北京烤鸭</Dropdown-item>
</Dropdown-menu>
</Dropdown>
<Dropdown trigger="hover" @on-click="click" style="margin-left: 20px"> <Dropdown trigger="hover" @on-click="click" style="margin-left: 20px">
<a href="javascript:void(0)"> <a href="javascript:void(0)">
hover 触发 hover 触发
@ -73,6 +100,7 @@
<Dropdown-item>北京烤鸭</Dropdown-item> <Dropdown-item>北京烤鸭</Dropdown-item>
</Dropdown-menu> </Dropdown-menu>
</Dropdown> </Dropdown>
</Card>
</template> </template>
<script> <script>
export default { export default {