drip-public/iview
6
1
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
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGE.md
View file

@ -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 有区别

4
README.md
View file

@ -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

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>

6
src/components/select/dropdown.vue
View file

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

1
src/components/slider/slider.vue
View file

@ -52,6 +52,7 @@
const prefixCls = 'ivu-slider';
export default {
name: 'Slider',
components: { InputNumber, Tooltip },
props: {
min: {

8
src/index.js
View file

@ -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,

1
test/app.vue
View file

@ -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>

4
test/main.js
View file

@ -116,6 +116,10 @@ const router = new VueRouter({
{
path: '/slider',
component: require('./routers/slider.vue')
},
{
path: '/dropdown',
component: require('./routers/dropdown.vue')
}
]
});

8
test/routers/dropdown.vue
View file

@ -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>