support Cascader
support Cascader
This commit is contained in:
梁灏
parent
2d43f26b05
commit
47a7f21dc6
11 changed files with 195 additions and 94 deletions
|
|
@ -5,39 +5,43 @@
|
|||
<i-input
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:value.sync="displayRender"
|
||||
v-model="displayRender"
|
||||
:size="size"
|
||||
:placeholder="placeholder"></i-input>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSelect"></Icon>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||
</slot>
|
||||
</div>
|
||||
<Dropdown v-show="visible" transition="slide-up">
|
||||
<div>
|
||||
<Caspanel
|
||||
v-ref:caspanel
|
||||
:prefix-cls="prefixCls"
|
||||
:data.sync="data"
|
||||
:disabled="disabled"
|
||||
:change-on-select="changeOnSelect"
|
||||
:trigger="trigger"></Caspanel>
|
||||
</div>
|
||||
</Dropdown>
|
||||
<transition name="slide-up">
|
||||
<Drop v-show="visible">
|
||||
<div>
|
||||
<Caspanel
|
||||
ref="caspanel"
|
||||
:prefix-cls="prefixCls"
|
||||
:data="data"
|
||||
:disabled="disabled"
|
||||
:change-on-select="changeOnSelect"
|
||||
:trigger="trigger"></Caspanel>
|
||||
</div>
|
||||
</Drop>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iInput from '../input/input.vue';
|
||||
import Dropdown from '../select/dropdown.vue';
|
||||
import Drop from '../select/dropdown.vue';
|
||||
import Icon from '../icon/icon.vue';
|
||||
import Caspanel from './caspanel.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf } from '../../utils/assist';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-cascader';
|
||||
|
||||
export default {
|
||||
name: 'Cascader',
|
||||
components: { iInput, Dropdown, Icon, Caspanel },
|
||||
mixins: [ Emitter ],
|
||||
components: { iInput, Drop, Icon, Caspanel },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
data: {
|
||||
|
|
@ -92,7 +96,8 @@
|
|||
visible: false,
|
||||
selected: [],
|
||||
tmpSelected: [],
|
||||
updatingValue: false // to fix set value in changeOnSelect type
|
||||
updatingValue: false, // to fix set value in changeOnSelect type
|
||||
currentValue: this.value
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -107,7 +112,7 @@
|
|||
];
|
||||
},
|
||||
showCloseIcon () {
|
||||
return this.value && this.value.length && this.clearable;
|
||||
return this.currentValue && this.currentValue.length && this.clearable;
|
||||
},
|
||||
displayRender () {
|
||||
let label = [];
|
||||
|
|
@ -120,11 +125,12 @@
|
|||
},
|
||||
methods: {
|
||||
clearSelect () {
|
||||
const oldVal = JSON.stringify(this.value);
|
||||
this.value = this.selected = this.tmpSelected = [];
|
||||
const oldVal = JSON.stringify(this.currentValue);
|
||||
this.currentValue = this.selected = this.tmpSelected = [];
|
||||
this.handleClose();
|
||||
this.emitValue(this.value, oldVal);
|
||||
this.$broadcast('on-clear');
|
||||
this.emitValue(this.currentValue, oldVal);
|
||||
// this.$broadcast('on-clear');
|
||||
this.broadcast('Caspanel', 'on-clear');
|
||||
},
|
||||
handleClose () {
|
||||
this.visible = false;
|
||||
|
|
@ -139,8 +145,8 @@
|
|||
},
|
||||
onFocus () {
|
||||
this.visible = true;
|
||||
if (!this.value.length) {
|
||||
this.$broadcast('on-clear');
|
||||
if (!this.currentValue.length) {
|
||||
this.broadcast('Caspanel', 'on-clear');
|
||||
}
|
||||
},
|
||||
updateResult (result) {
|
||||
|
|
@ -148,25 +154,30 @@
|
|||
},
|
||||
updateSelected (init = false) {
|
||||
if (!this.changeOnSelect || init) {
|
||||
this.$broadcast('on-find-selected', this.value);
|
||||
this.broadcast('Caspanel', 'on-find-selected', {
|
||||
value: this.currentValue
|
||||
});
|
||||
}
|
||||
},
|
||||
emitValue (val, oldVal) {
|
||||
if (JSON.stringify(val) !== oldVal) {
|
||||
this.$emit('on-change', this.value, JSON.parse(JSON.stringify(this.selected)));
|
||||
this.$dispatch('on-form-change', this.value, JSON.parse(JSON.stringify(this.selected)));
|
||||
this.$emit('on-change', this.currentValue, JSON.parse(JSON.stringify(this.selected)));
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', this.currentValue, JSON.parse(JSON.stringify(this.selected)));
|
||||
}
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
mounted () {
|
||||
this.updateSelected(true);
|
||||
},
|
||||
events: {
|
||||
// lastValue: is click the final val
|
||||
// fromInit: is this emit from update value
|
||||
'on-result-change' (lastValue, changeOnSelect, fromInit) {
|
||||
this.$on('on-result-change', (params) => {
|
||||
// lastValue: is click the final val
|
||||
// fromInit: is this emit from update value
|
||||
const lastValue = params.lastValue;
|
||||
const changeOnSelect = params.changeOnSelect;
|
||||
const fromInit = params.fromInit;
|
||||
|
||||
if (lastValue || changeOnSelect) {
|
||||
const oldVal = JSON.stringify(this.value);
|
||||
const oldVal = JSON.stringify(this.currentValue);
|
||||
this.selected = this.tmpSelected;
|
||||
|
||||
let newVal = [];
|
||||
|
|
@ -176,30 +187,37 @@
|
|||
|
||||
if (!fromInit) {
|
||||
this.updatingValue = true;
|
||||
this.value = newVal;
|
||||
this.emitValue(this.value, oldVal);
|
||||
this.currentValue = newVal;
|
||||
this.emitValue(this.currentValue, oldVal);
|
||||
}
|
||||
}
|
||||
if (lastValue && !fromInit) {
|
||||
this.handleClose();
|
||||
}
|
||||
},
|
||||
'on-form-blur' () {
|
||||
return false;
|
||||
},
|
||||
'on-form-change' () {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// todo 事件 这是因为内部的input会触发，应该组织
|
||||
// events: {
|
||||
// 'on-form-blur' () {
|
||||
// return false;
|
||||
// },
|
||||
// 'on-form-change' () {
|
||||
// return false;
|
||||
// }
|
||||
// },
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
if (this.value.length) {
|
||||
if (this.currentValue.length) {
|
||||
this.updateSelected();
|
||||
}
|
||||
}
|
||||
},
|
||||
value () {
|
||||
value (val) {
|
||||
this.currentValue = val;
|
||||
},
|
||||
currentValue () {
|
||||
this.$emit('input', this.currentValue);
|
||||
if (this.updatingValue) {
|
||||
this.updatingValue = false;
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Casitem',
|
||||
props: {
|
||||
data: Object,
|
||||
prefixCls: String,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
const prefixCls = 'ivu-spin';
|
||||
|
||||
export default {
|
||||
name: 'Spin',
|
||||
props: {
|
||||
size: {
|
||||
validator (value) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue