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

support Cascader

Browse source 
support Cascader
This commit is contained in:
梁灏 2017-03-06 17:30:39 +08:00
parent 2d43f26b05
commit 47a7f21dc6
11 changed files with 195 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/components/cascader/caspanel.vue
View file

@ -1,19 +1,23 @@
<template>
<ul v-if="data && data.length" :class="[prefixCls + '-menu']">
<Casitem
v-for="item in data"
:prefix-cls="prefixCls"
:data.sync="item"
:tmp-item="tmpItem"
@click.stop="handleClickItem(item)"
@mouseenter.stop="handleHoverItem(item)"></Casitem>
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
<span>
<ul v-if="data && data.length" :class="[prefixCls + '-menu']">
<Casitem
v-for="item in data"
:prefix-cls="prefixCls"
:data="item"
:tmp-item="tmpItem"
@click.native.stop="handleClickItem(item)"
@mouseenter.native.stop="handleHoverItem(item)"></Casitem>
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
</span>
</template>
<script>
import Casitem from './casitem.vue';
import Emitter from '../../mixins/emitter';
export default {
name: 'Caspanel',
mixins: [ Emitter ],
components: { Casitem },
props: {
data: {
@ -22,12 +26,6 @@
return [];
}
},
sublist: {
type: Array,
default () {
return [];
}
},
disabled: Boolean,
changeOnSelect: Boolean,
trigger: String,
@ -36,9 +34,15 @@
data () {
return {
tmpItem: {},
result: []
result: [],
sublist: []
};
},
watch: {
data () {
this.sublist = [];
}
},
methods: {
handleClickItem (item) {
if (this.trigger !== 'click' && item.children) return;
@ -58,10 +62,20 @@
if (item.children && item.children.length){
this.sublist = item.children;
this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
// this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
this.dispatch('Cascader', 'on-result-change', {
lastValue: false,
changeOnSelect: this.changeOnSelect,
fromInit: fromInit
});
} else {
this.sublist = [];
this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
// this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
this.dispatch('Cascader', 'on-result-change', {
lastValue: true,
changeOnSelect: this.changeOnSelect,
fromInit: fromInit
});
}
},
updateResult (item) {
@ -84,13 +98,9 @@
}
}
},
watch: {
data () {
this.sublist = [];
}
},
events: {
'on-find-selected' (val) {
mounted () {
this.$on('on-find-selected', (params) => {
const val = params.value;
let value = [...val];
for (let i = 0; i < value.length; i++) {
for (let j = 0; j < this.data.length; j++) {
@ -98,17 +108,19 @@
this.handleTriggerItem(this.data[j], true);
value.splice(0, 1);
this.$nextTick(() => {
this.$broadcast('on-find-selected', value);
this.broadcast('Caspanel', 'on-find-selected', {
value: value
});
});
return false;
}
}
}
},
'on-clear' () {
});
this.$on('on-clear', () => {
this.sublist = [];
this.tmpItem = {};
}
});
}
};
</script>