support Select
support Select
This commit is contained in:
梁灏
parent
47a7f21dc6
commit
4aec6a66bb
9 changed files with 343 additions and 143 deletions
|
|
@ -41,3 +41,5 @@ MenuItem 和 Submenu 的 key 改为了 name
|
|||
Menu 的 activeKey 改为 activeName,openKeys 改为 openNames
|
||||
### Cascader
|
||||
Caspanel 的 sublist 从 prop -> data
|
||||
### Select
|
||||
model 改为 value，支持 v-model
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
- [x] Checkbox
|
||||
- [x] Switch
|
||||
- [ ] Table
|
||||
- [ ] Select
|
||||
- [x] Select
|
||||
- [x] Slider
|
||||
- [ ] DatePicker
|
||||
- [ ] TimePicker
|
||||
|
|
|
|||
|
|
@ -43,6 +43,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
|
|||
<li><router-link to="/menu">Menu</router-link></li>
|
||||
<li><router-link to="/spin">Spin</router-link></li>
|
||||
<li><router-link to="/cascader">Cascader</router-link></li>
|
||||
<li><router-link to="/select">Select</router-link></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<router-view></router-view>
|
||||
|
|
|
|||
|
|
@ -136,6 +136,10 @@ const router = new VueRouter({
|
|||
{
|
||||
path: '/cascader',
|
||||
component: require('./routers/cascader.vue')
|
||||
},
|
||||
{
|
||||
path: '/select',
|
||||
component: require('./routers/select.vue')
|
||||
}
|
||||
]
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,28 +1,218 @@
|
|||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model1" style="width:200px" clearable>-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--{{ model1 }}-->
|
||||
<!--<div @click="c">change</div>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model1: ''-->
|
||||
<!--}-->
|
||||
<!--},-->
|
||||
<!--methods: {-->
|
||||
<!--c () {-->
|
||||
<!--this.model1 = 'hangzhou'-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model5" disabled style="width:200px">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--<i-select v-model="model6" style="width:200px">-->
|
||||
<!--<i-option value="beijing">北京市</i-option>-->
|
||||
<!--<i-option value="shanghai" disabled>上海市</i-option>-->
|
||||
<!--<i-option value="shenzhen">深圳市</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model5: '',-->
|
||||
<!--model6: ''-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model7" style="width:200px">-->
|
||||
<!--<Option-group label="热门城市">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</Option-group>-->
|
||||
<!--<Option-group label="其它城市">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</Option-group>-->
|
||||
<!--</i-select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model7: ''-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<!--<template>-->
|
||||
<!--<div>-->
|
||||
<!--<i-select v-model="model10" multiple style="width:260px">-->
|
||||
<!--<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>-->
|
||||
<!--</i-select>-->
|
||||
<!--</div>-->
|
||||
<!--</template>-->
|
||||
<!--<script>-->
|
||||
<!--export default {-->
|
||||
<!--data () {-->
|
||||
<!--return {-->
|
||||
<!--cityList: [-->
|
||||
<!--{-->
|
||||
<!--value: 'beijing',-->
|
||||
<!--label: '北京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shanghai',-->
|
||||
<!--label: '上海市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'shenzhen',-->
|
||||
<!--label: '深圳市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'hangzhou',-->
|
||||
<!--label: '杭州市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'nanjing',-->
|
||||
<!--label: '南京市'-->
|
||||
<!--},-->
|
||||
<!--{-->
|
||||
<!--value: 'chongqing',-->
|
||||
<!--label: '重庆市'-->
|
||||
<!--}-->
|
||||
<!--],-->
|
||||
<!--model10: []-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--}-->
|
||||
<!--</script>-->
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model111" filterable>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
<i-select v-model="model11" filterable>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12" style="padding-right:10px">
|
||||
<i-select :model.sync="model112" filterable>
|
||||
<i-option v-for="item in cityList2" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<Row>
|
||||
<i-col span="12">
|
||||
<i-select :model.sync="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList1" :value="item.value">{{ item.label }}</i-option>
|
||||
<i-select v-model="model12" filterable multiple>
|
||||
<i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
|
||||
</i-select>
|
||||
</i-col>
|
||||
</Row>
|
||||
<div @click="model11 = 'shanghai'">change</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
const cityList = [
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cityList: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
|
|
@ -47,24 +237,10 @@ const cityList = [
|
|||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
}
|
||||
]
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
cityList1: cityList,
|
||||
model111: '',
|
||||
|
||||
cityList2: [],
|
||||
model112: 'beijing',
|
||||
|
||||
],
|
||||
model11: '',
|
||||
model12: []
|
||||
}
|
||||
},
|
||||
ready() {
|
||||
this.model111 = 'hangzhou'
|
||||
setTimeout(()=>{
|
||||
this.cityList2 = cityList
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<li :class="[prefixCls + '-wrap']" v-show="!hidden">
|
||||
<div :class="[prefixCls + '-title']">{{ label }}</div>
|
||||
<ul>
|
||||
<li :class="[prefixCls]" v-el:options><slot></slot></li>
|
||||
<li :class="[prefixCls]" ref="options"><slot></slot></li>
|
||||
</ul>
|
||||
</li>
|
||||
</template>
|
||||
|
|
@ -10,6 +10,7 @@
|
|||
const prefixCls = 'ivu-select-group';
|
||||
|
||||
export default {
|
||||
name: 'OptionGroup',
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
methods: {
|
||||
queryChange () {
|
||||
this.$nextTick(() => {
|
||||
const options = this.$els.options.querySelectorAll('.ivu-select-item');
|
||||
const options = this.$refs.options.querySelectorAll('.ivu-select-item');
|
||||
let hasVisibleOption = false;
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
if (options[i].style.display !== 'none') {
|
||||
|
|
@ -37,11 +38,11 @@
|
|||
});
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-query-change' () {
|
||||
mounted () {
|
||||
this.$on('on-query-change', () => {
|
||||
this.queryChange();
|
||||
return true;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,9 +2,14 @@
|
|||
<li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
|
||||
</template>
|
||||
<script>
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-select-item';
|
||||
|
||||
export default {
|
||||
name: 'iOption',
|
||||
componentName: 'select-item',
|
||||
mixins: [ Emitter ],
|
||||
props: {
|
||||
value: {
|
||||
type: [String, Number],
|
||||
|
|
@ -18,7 +23,6 @@
|
|||
default: false
|
||||
}
|
||||
},
|
||||
componentName: 'select-item',
|
||||
data () {
|
||||
return {
|
||||
selected: false,
|
||||
|
|
@ -49,7 +53,7 @@
|
|||
return false;
|
||||
}
|
||||
|
||||
this.$dispatch('on-select-selected', this.value);
|
||||
this.dispatch('iSelect', 'on-select-selected', this.value);
|
||||
},
|
||||
blur () {
|
||||
this.isFocus = false;
|
||||
|
|
@ -59,16 +63,14 @@
|
|||
this.hidden = !new RegExp(parsedQuery, 'i').test(this.searchLabel);
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
mounted () {
|
||||
this.searchLabel = this.$el.innerHTML;
|
||||
},
|
||||
events: {
|
||||
'on-select-close' () {
|
||||
this.$on('on-select-close', () => {
|
||||
this.isFocus = false;
|
||||
},
|
||||
'on-query-change' (val) {
|
||||
});
|
||||
this.$on('on-query-change', (val) => {
|
||||
this.queryChange(val);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
<div :class="classes" v-clickoutside="handleClose">
|
||||
<div
|
||||
:class="[prefixCls + '-selection']"
|
||||
v-el:reference
|
||||
ref="reference"
|
||||
@click="toggleMenu">
|
||||
<div class="ivu-tag" v-for="item in selectedMultiple">
|
||||
<div class="ivu-tag" v-for="(item, index) in selectedMultiple">
|
||||
<span class="ivu-tag-text">{{ item.label }}</span>
|
||||
<Icon type="ios-close-empty" @click.stop="removeTag($index)"></Icon>
|
||||
<Icon type="ios-close-empty" @click.native.stop="removeTag(index)"></Icon>
|
||||
</div>
|
||||
<span :class="[prefixCls + '-placeholder']" v-show="showPlaceholder && !filterable">{{ placeholder }}</span>
|
||||
<span :class="[prefixCls + '-selected-value']" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
|
||||
|
|
@ -20,31 +20,35 @@
|
|||
@blur="handleBlur"
|
||||
@keydown="resetInputState"
|
||||
@keydown.delete="handleInputDelete"
|
||||
v-el:input>
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
|
||||
ref="input">
|
||||
<Icon type="ios-close" :class="[prefixCls + '-arrow']" v-show="showCloseIcon" @click.native.stop="clearSingleSelect"></Icon>
|
||||
<Icon type="arrow-down-b" :class="[prefixCls + '-arrow']"></Icon>
|
||||
</div>
|
||||
<Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
|
||||
<transition name="slide-up">
|
||||
<Drop v-show="visible" ref="dropdown">
|
||||
<ul v-show="notFound" :class="[prefixCls + '-not-found']"><li>{{ notFoundText }}</li></ul>
|
||||
<ul v-else :class="[prefixCls + '-dropdown-list']" v-el:options><slot></slot></ul>
|
||||
</Dropdown>
|
||||
<ul v-show="!notFound" :class="[prefixCls + '-dropdown-list']" ref="options"><slot></slot></ul>
|
||||
</Drop>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Icon from '../icon';
|
||||
import Dropdown from './dropdown.vue';
|
||||
import Drop from './dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf, MutationObserver } from '../../utils/assist';
|
||||
import { t } from '../../locale';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
const prefixCls = 'ivu-select';
|
||||
|
||||
export default {
|
||||
name: 'iSelect',
|
||||
components: { Icon, Dropdown },
|
||||
mixins: [ Emitter ],
|
||||
components: { Icon, Drop },
|
||||
directives: { clickoutside },
|
||||
props: {
|
||||
model: {
|
||||
value: {
|
||||
type: [String, Number, Array],
|
||||
default: ''
|
||||
},
|
||||
|
|
@ -101,7 +105,8 @@
|
|||
query: '',
|
||||
inputLength: 20,
|
||||
notFound: false,
|
||||
slotChangeDuration: false // if slot change duration and in multiple, set true and after slot change, set false
|
||||
slotChangeDuration: false, // if slot change duration and in multiple, set true and after slot change, set false
|
||||
model: this.value
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -161,7 +166,7 @@
|
|||
hideMenu () {
|
||||
this.visible = false;
|
||||
this.focusIndex = 0;
|
||||
this.$broadcast('on-select-close');
|
||||
this.broadcast('iOption', 'on-select-close');
|
||||
},
|
||||
// find option component
|
||||
findChild (cb) {
|
||||
|
|
@ -289,10 +294,10 @@
|
|||
this.model.splice(index, 1);
|
||||
|
||||
if (this.filterable && this.visible) {
|
||||
this.$els.input.focus();
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
|
||||
this.$broadcast('on-update-popper');
|
||||
this.broadcast('Drop', 'on-update-popper');
|
||||
},
|
||||
// to select option for single
|
||||
toggleSingleSelected (value, init = false) {
|
||||
|
|
@ -316,13 +321,15 @@
|
|||
value: value,
|
||||
label: label
|
||||
});
|
||||
this.$dispatch('on-form-change', {
|
||||
value: value,
|
||||
label: label
|
||||
});
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', {
|
||||
// value: value,
|
||||
// label: label
|
||||
// });
|
||||
} else {
|
||||
this.$emit('on-change', value);
|
||||
this.$dispatch('on-form-change', value);
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -351,10 +358,12 @@
|
|||
if (!init) {
|
||||
if (this.labelInValue) {
|
||||
this.$emit('on-change', hybridValue);
|
||||
this.$dispatch('on-form-change', hybridValue);
|
||||
} else {
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', hybridValue);
|
||||
// } else {
|
||||
this.$emit('on-change', value);
|
||||
this.$dispatch('on-form-change', value);
|
||||
// todo 事件
|
||||
// this.$dispatch('on-form-change', value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -463,7 +472,7 @@
|
|||
}, 300);
|
||||
},
|
||||
resetInputState () {
|
||||
this.inputLength = this.$els.input.value.length * 12 + 20;
|
||||
this.inputLength = this.$refs.input.value.length * 12 + 20;
|
||||
},
|
||||
handleInputDelete () {
|
||||
if (this.multiple && this.model.length && this.query === '') {
|
||||
|
|
@ -495,7 +504,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
compiled () {
|
||||
mounted () {
|
||||
this.modelToQuery();
|
||||
|
||||
this.updateOptions(true);
|
||||
|
|
@ -509,13 +518,44 @@
|
|||
this.updateOptions(true, true);
|
||||
});
|
||||
|
||||
this.observer.observe(this.$els.options, {
|
||||
this.observer.observe(this.$refs.options, {
|
||||
// attributes: true,
|
||||
childList: true,
|
||||
characterData: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
|
||||
this.$on('on-select-selected', (value) => {
|
||||
if (this.model === value) {
|
||||
this.hideMenu();
|
||||
} else {
|
||||
if (this.multiple) {
|
||||
const index = this.model.indexOf(value);
|
||||
if (index >= 0) {
|
||||
this.removeTag(index);
|
||||
} else {
|
||||
this.model.push(value);
|
||||
this.broadcast('Drop', 'on-update-popper');
|
||||
}
|
||||
|
||||
if (this.filterable) {
|
||||
this.query = '';
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
} else {
|
||||
this.model = value;
|
||||
|
||||
if (this.filterable) {
|
||||
this.findChild((child) => {
|
||||
if (child.value === value) {
|
||||
this.query = child.label === undefined ? child.searchLabel : child.label;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.handleKeydown);
|
||||
|
|
@ -524,7 +564,11 @@
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
this.model = val;
|
||||
},
|
||||
model () {
|
||||
this.$emit('input', this.model);
|
||||
this.modelToQuery();
|
||||
if (this.multiple) {
|
||||
if (this.slotChangeDuration) {
|
||||
|
|
@ -539,18 +583,20 @@
|
|||
visible (val) {
|
||||
if (val) {
|
||||
if (this.multiple && this.filterable) {
|
||||
this.$els.input.focus();
|
||||
this.$refs.input.focus();
|
||||
}
|
||||
this.$broadcast('on-update-popper');
|
||||
this.broadcast('Drop', 'on-update-popper');
|
||||
} else {
|
||||
if (this.filterable) {
|
||||
this.$els.input.blur();
|
||||
this.$refs.input.blur();
|
||||
}
|
||||
this.$broadcast('on-destroy-popper');
|
||||
this.broadcast('Drop', 'on-destroy-popper');
|
||||
}
|
||||
},
|
||||
query (val) {
|
||||
this.$broadcast('on-query-change', val);
|
||||
// todo 这里会重复
|
||||
this.broadcast('OptionGroup', 'on-query-change', val);
|
||||
this.broadcast('iOption', 'on-query-change', val);
|
||||
let is_hidden = true;
|
||||
|
||||
this.$nextTick(() => {
|
||||
|
|
@ -561,39 +607,7 @@
|
|||
});
|
||||
this.notFound = is_hidden;
|
||||
});
|
||||
this.$broadcast('on-update-popper');
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'on-select-selected' (value) {
|
||||
if (this.model === value) {
|
||||
this.hideMenu();
|
||||
} else {
|
||||
if (this.multiple) {
|
||||
const index = this.model.indexOf(value);
|
||||
if (index >= 0) {
|
||||
this.removeTag(index);
|
||||
} else {
|
||||
this.model.push(value);
|
||||
this.$broadcast('on-update-popper');
|
||||
}
|
||||
|
||||
if (this.filterable) {
|
||||
this.query = '';
|
||||
this.$els.input.focus();
|
||||
}
|
||||
} else {
|
||||
this.model = value;
|
||||
|
||||
if (this.filterable) {
|
||||
this.findChild((child) => {
|
||||
if (child.value === value) {
|
||||
this.query = child.label === undefined ? child.searchLabel : child.label;
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
this.broadcast('Drop', 'on-update-popper');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ import Tooltip from './components/tooltip';
|
|||
import Tree from './components/tree';
|
||||
import Upload from './components/upload';
|
||||
import { Row, Col } from './components/grid';
|
||||
// import { Select, Option, OptionGroup } from './components/select';
|
||||
import { Select, Option, OptionGroup } from './components/select';
|
||||
import locale from './locale';
|
||||
|
||||
const iview = {
|
||||
|
|
@ -83,8 +83,8 @@ const iview = {
|
|||
// Message,
|
||||
// Modal,
|
||||
// Notice,
|
||||
// iOption: Option,
|
||||
// OptionGroup,
|
||||
iOption: Option,
|
||||
OptionGroup,
|
||||
// Page,
|
||||
Panel: Collapse.Panel,
|
||||
Poptip,
|
||||
|
|
@ -93,7 +93,7 @@ const iview = {
|
|||
RadioGroup: Radio.Group,
|
||||
Rate,
|
||||
Row,
|
||||
// iSelect: Select,
|
||||
iSelect: Select,
|
||||
Slider,
|
||||
Spin,
|
||||
Step: Steps.Step,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue