update Cascader
update Cascader
This commit is contained in:
梁灏
parent
c463ab8757
commit
bd4e3b9b0a
4 changed files with 85 additions and 29 deletions
|
|
@ -12,11 +12,12 @@
|
|||
<Dropdown v-show="visible" transition="slide-up">
|
||||
<div>
|
||||
<Caspanel
|
||||
v-ref:caspanel
|
||||
:prefix-cls="prefixCls"
|
||||
:data.sync="data"
|
||||
:disabled="disabled"
|
||||
:trigger="trigger"
|
||||
@on-update-result="updateResult"></Caspanel>
|
||||
:change-on-select="changeOnSelect"
|
||||
:trigger="trigger"></Caspanel>
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
|
|
@ -118,12 +119,46 @@
|
|||
this.visible = true;
|
||||
},
|
||||
updateResult (result) {
|
||||
console.log(JSON.stringify(result))
|
||||
this.selected = result;
|
||||
this.tmpSelected = result;
|
||||
},
|
||||
updateSelected () {
|
||||
this.$broadcast('on-find-selected', this.value);
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateSelected();
|
||||
},
|
||||
events: {
|
||||
// lastValue: is click the final val
|
||||
// fromInit: is this emit from update value
|
||||
'on-result-change' (lastValue, changeOnSelect, fromInit) {
|
||||
if (lastValue || changeOnSelect) {
|
||||
const oldVal = JSON.stringify(this.value);
|
||||
this.selected = this.tmpSelected;
|
||||
|
||||
let newVal = [];
|
||||
this.selected.forEach((item) => {
|
||||
newVal.push(item.value);
|
||||
});
|
||||
this.value = newVal;
|
||||
|
||||
if (JSON.stringify(this.value) !== oldVal) {
|
||||
this.$emit('on-change', this.value);
|
||||
}
|
||||
}
|
||||
if (lastValue && !fromInit) {
|
||||
this.handleClose();
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
if (this.value.length) {
|
||||
this.updateSelected();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
return [
|
||||
`${this.prefixCls}-menu-item`,
|
||||
{
|
||||
[`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value
|
||||
[`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value,
|
||||
[`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
: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" @on-update-result="updateResult"></Caspanel>
|
||||
</ul><Caspanel v-if="sublist && sublist.length" :prefix-cls="prefixCls" :data.sync="sublist" :disabled="disabled" :trigger="trigger" :change-on-select="changeOnSelect"></Caspanel>
|
||||
</template>
|
||||
<script>
|
||||
import Casitem from './casitem.vue';
|
||||
|
|
@ -31,11 +31,7 @@
|
|||
},
|
||||
disabled: Boolean,
|
||||
changeOnSelect: Boolean,
|
||||
trigger: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['click', 'hover']);
|
||||
}
|
||||
},
|
||||
trigger: String,
|
||||
prefixCls: String
|
||||
},
|
||||
data () {
|
||||
|
|
@ -46,33 +42,32 @@
|
|||
},
|
||||
methods: {
|
||||
handleClickItem (item) {
|
||||
if (this.trigger !== 'click') return;
|
||||
if (this.trigger !== 'click' && item.children) return;
|
||||
this.handleTriggerItem(item);
|
||||
},
|
||||
handleHoverItem (item) {
|
||||
if (this.trigger !== 'hover') return;
|
||||
if (this.trigger !== 'hover' || !item.children) return;
|
||||
this.handleTriggerItem(item);
|
||||
},
|
||||
handleTriggerItem (item) {
|
||||
handleTriggerItem (item, fromInit = false) {
|
||||
if (item.disabled) return;
|
||||
|
||||
// return value back recursion
|
||||
const backItem = this.getBaseItem(item);
|
||||
this.tmpItem = backItem;
|
||||
this.emitUpdate([backItem]);
|
||||
|
||||
if (item.children && item.children.length){
|
||||
this.sublist = item.children;
|
||||
// todo 实时选择
|
||||
this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
|
||||
} else {
|
||||
this.sublist = [];
|
||||
// todo 选择
|
||||
this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
|
||||
}
|
||||
|
||||
// return value back
|
||||
const backItem = this.getBaseItem(item);
|
||||
|
||||
this.tmpItem = backItem;
|
||||
this.$emit('on-update-result', [backItem]);
|
||||
},
|
||||
updateResult (item) {
|
||||
this.result = [this.tmpItem].concat(item);
|
||||
this.$emit('on-update-result', this.result);
|
||||
this.emitUpdate(this.result);
|
||||
},
|
||||
getBaseItem (item) {
|
||||
let backItem = Object.assign({}, item);
|
||||
|
|
@ -81,6 +76,13 @@
|
|||
}
|
||||
|
||||
return backItem;
|
||||
},
|
||||
emitUpdate (result) {
|
||||
if (this.$parent.$options.name === 'Caspanel') {
|
||||
this.$parent.updateResult(result);
|
||||
} else {
|
||||
this.$parent.$parent.updateResult(result);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
@ -88,8 +90,22 @@
|
|||
this.sublist = [];
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
// todo 初始化时，判断预设的值
|
||||
events: {
|
||||
'on-find-selected' (val) {
|
||||
let value = [...val];
|
||||
for (let i = 0; i < value.length; i++) {
|
||||
for (let j = 0; j < this.data.length; j++) {
|
||||
if (value[i] === this.data[j].value) {
|
||||
this.handleTriggerItem(this.data[j], true);
|
||||
value.splice(0, 1);
|
||||
this.$nextTick(() => {
|
||||
this.$broadcast('on-find-selected', value);
|
||||
});
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div style="margin: 50px;width:300px">
|
||||
<Cascader :data="data" :value="value"></Cascader>
|
||||
<Cascader :data="data" :value.sync="value" @on-change="change" trigger="click"></Cascader>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
@ -11,7 +11,8 @@
|
|||
},
|
||||
data () {
|
||||
return {
|
||||
value: [],
|
||||
value: ['jiangsu', 'hhh', 'ddd'],
|
||||
// value: [],
|
||||
data: [{
|
||||
value: 'zhejiang',
|
||||
label: 'Zhejiang',
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
children: [{
|
||||
value: 'nanjing',
|
||||
label: 'Nanjing',
|
||||
// disabled: true,
|
||||
children: [{
|
||||
value: 'zhonghuamen',
|
||||
label: 'Zhong Hua Men',
|
||||
|
|
@ -48,7 +50,9 @@
|
|||
|
||||
},
|
||||
methods: {
|
||||
|
||||
change (data) {
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
Add table
Reference in a new issue