empty master
This commit is contained in:
梁灏
parent
92c1162255
commit
67d534df27
276 changed files with 0 additions and 28368 deletions
|
|
@ -1,210 +0,0 @@
|
|||
<template>
|
||||
<div :class="classes" v-clickoutside="handleClose">
|
||||
<div :class="[prefixCls + '-rel']" @click="toggleOpen">
|
||||
<slot>
|
||||
<i-input
|
||||
readonly
|
||||
:disabled="disabled"
|
||||
:value.sync="displayRender"
|
||||
:size="size"
|
||||
:placeholder="placeholder"></i-input>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import iInput from '../input/input.vue';
|
||||
import Dropdown 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';
|
||||
|
||||
const prefixCls = 'ivu-cascader';
|
||||
|
||||
export default {
|
||||
components: { iInput, Dropdown, Icon, Caspanel },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
value: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
clearable: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '请选择'
|
||||
},
|
||||
size: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['small', 'large']);
|
||||
}
|
||||
},
|
||||
trigger: {
|
||||
validator (value) {
|
||||
return oneOf(value, ['click', 'hover']);
|
||||
},
|
||||
default: 'click'
|
||||
},
|
||||
changeOnSelect: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
renderFormat: {
|
||||
type: Function,
|
||||
default (label) {
|
||||
return label.join(' / ');
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
prefixCls: prefixCls,
|
||||
visible: false,
|
||||
selected: [],
|
||||
tmpSelected: [],
|
||||
updatingValue: false // to fix set value in changeOnSelect type
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${prefixCls}`,
|
||||
{
|
||||
[`${prefixCls}-show-clear`]: this.showCloseIcon,
|
||||
[`${prefixCls}-visible`]: this.visible,
|
||||
[`${prefixCls}-disabled`]: this.disabled
|
||||
}
|
||||
];
|
||||
},
|
||||
showCloseIcon () {
|
||||
return this.value && this.value.length && this.clearable;
|
||||
},
|
||||
displayRender () {
|
||||
let label = [];
|
||||
for (let i = 0; i < this.selected.length; i++) {
|
||||
label.push(this.selected[i].label);
|
||||
}
|
||||
|
||||
return this.renderFormat(label, this.selected);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clearSelect () {
|
||||
const oldVal = JSON.stringify(this.value);
|
||||
this.value = this.selected = this.tmpSelected = [];
|
||||
this.handleClose();
|
||||
this.emitValue(this.value, oldVal);
|
||||
this.$broadcast('on-clear');
|
||||
},
|
||||
handleClose () {
|
||||
this.visible = false;
|
||||
},
|
||||
toggleOpen () {
|
||||
if (this.disabled) return false;
|
||||
if (this.visible) {
|
||||
this.handleClose();
|
||||
} else {
|
||||
this.onFocus();
|
||||
}
|
||||
},
|
||||
onFocus () {
|
||||
this.visible = true;
|
||||
if (!this.value.length) {
|
||||
this.$broadcast('on-clear');
|
||||
}
|
||||
},
|
||||
updateResult (result) {
|
||||
this.tmpSelected = result;
|
||||
},
|
||||
updateSelected (init = false) {
|
||||
if (!this.changeOnSelect || init) {
|
||||
this.$broadcast('on-find-selected', this.value);
|
||||
}
|
||||
},
|
||||
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)));
|
||||
}
|
||||
}
|
||||
},
|
||||
ready () {
|
||||
this.updateSelected(true);
|
||||
},
|
||||
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);
|
||||
});
|
||||
|
||||
if (!fromInit) {
|
||||
this.updatingValue = true;
|
||||
this.value = newVal;
|
||||
this.emitValue(this.value, oldVal);
|
||||
}
|
||||
}
|
||||
if (lastValue && !fromInit) {
|
||||
this.handleClose();
|
||||
}
|
||||
},
|
||||
'on-form-blur' () {
|
||||
return false;
|
||||
},
|
||||
'on-form-change' () {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
visible (val) {
|
||||
if (val) {
|
||||
if (this.value.length) {
|
||||
this.updateSelected();
|
||||
}
|
||||
}
|
||||
},
|
||||
value () {
|
||||
if (this.updatingValue) {
|
||||
this.updatingValue = false;
|
||||
return;
|
||||
}
|
||||
this.updateSelected(true);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<li :class="classes">{{ data.label }}<i v-if="data.children && data.children.length" class="ivu-icon ivu-icon-ios-arrow-right"></i></li>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Object,
|
||||
prefixCls: String,
|
||||
tmpItem: Object
|
||||
},
|
||||
computed: {
|
||||
classes () {
|
||||
return [
|
||||
`${this.prefixCls}-menu-item`,
|
||||
{
|
||||
[`${this.prefixCls}-menu-item-active`]: this.tmpItem.value === this.data.value,
|
||||
[`${this.prefixCls}-menu-item-disabled`]: this.data.disabled
|
||||
}
|
||||
];
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,114 +0,0 @@
|
|||
<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>
|
||||
</template>
|
||||
<script>
|
||||
import Casitem from './casitem.vue';
|
||||
|
||||
export default {
|
||||
name: 'Caspanel',
|
||||
components: { Casitem },
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
sublist: {
|
||||
type: Array,
|
||||
default () {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
disabled: Boolean,
|
||||
changeOnSelect: Boolean,
|
||||
trigger: String,
|
||||
prefixCls: String
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tmpItem: {},
|
||||
result: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleClickItem (item) {
|
||||
if (this.trigger !== 'click' && item.children) return;
|
||||
this.handleTriggerItem(item);
|
||||
},
|
||||
handleHoverItem (item) {
|
||||
if (this.trigger !== 'hover' || !item.children) return;
|
||||
this.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;
|
||||
this.$dispatch('on-result-change', false, this.changeOnSelect, fromInit);
|
||||
} else {
|
||||
this.sublist = [];
|
||||
this.$dispatch('on-result-change', true, this.changeOnSelect, fromInit);
|
||||
}
|
||||
},
|
||||
updateResult (item) {
|
||||
this.result = [this.tmpItem].concat(item);
|
||||
this.emitUpdate(this.result);
|
||||
},
|
||||
getBaseItem (item) {
|
||||
let backItem = Object.assign({}, item);
|
||||
if (backItem.children) {
|
||||
delete backItem.children;
|
||||
}
|
||||
|
||||
return backItem;
|
||||
},
|
||||
emitUpdate (result) {
|
||||
if (this.$parent.$options.name === 'Caspanel') {
|
||||
this.$parent.updateResult(result);
|
||||
} else {
|
||||
this.$parent.$parent.updateResult(result);
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data () {
|
||||
this.sublist = [];
|
||||
}
|
||||
},
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
'on-clear' () {
|
||||
this.sublist = [];
|
||||
this.tmpItem = {};
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Cascader from './cascader.vue';
|
||||
export default Cascader;
|
||||
Loading…
Add table
Add a link
Reference in a new issue