update Select
support IE9
This commit is contained in:
parent
345c6863bf
commit
ed91d9b0c7
3 changed files with 49 additions and 34 deletions
|
@ -193,31 +193,51 @@
|
|||
|
||||
<template>
|
||||
<div>
|
||||
<i-select v-model="d" filterable style="width: 200px" multiple>
|
||||
<i-option :key="e" v-for="e in uList" :value="e.id" :label="e.name">
|
||||
<span>{{ e.name }}</span>
|
||||
<span style="float:right;color:#ccc">{{ e.id }}</span>
|
||||
</i-option>
|
||||
</i-select>
|
||||
<p>{{d}}</p>
|
||||
<i-button type="primary" v-on:click="clear">清空</i-button>
|
||||
<Select v-model="model1" style="width:200px">
|
||||
<Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
|
||||
</Select>
|
||||
{{ model1 }}
|
||||
<Button @click="set">set</Button>
|
||||
<Button @click="add">add</Button>
|
||||
<Button @click="remove">remove</Button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
d: [],
|
||||
uList : [
|
||||
{id:1,name:"中国"},
|
||||
{id:2,name:"美国"},
|
||||
{id:3,name:"韩国"}
|
||||
]
|
||||
cityList: [
|
||||
{
|
||||
value: 'beijing',
|
||||
label: '北京市'
|
||||
},
|
||||
{
|
||||
value: 'shanghai',
|
||||
label: '上海市'
|
||||
},
|
||||
{
|
||||
value: 'shenzhen',
|
||||
label: '深圳市'
|
||||
}
|
||||
],
|
||||
model1: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
clear(){
|
||||
this.d = [];
|
||||
},
|
||||
set () {
|
||||
this.model1 = 'shenzhen';
|
||||
},
|
||||
add () {
|
||||
this.cityList.push({
|
||||
value: 'chongqing',
|
||||
label: '重庆市'
|
||||
});
|
||||
},
|
||||
remove () {
|
||||
this.cityList.splice(0, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -65,12 +65,16 @@
|
|||
},
|
||||
mounted () {
|
||||
this.searchLabel = this.$el.innerHTML;
|
||||
this.dispatch('iSelect', 'append');
|
||||
this.$on('on-select-close', () => {
|
||||
this.isFocus = false;
|
||||
});
|
||||
this.$on('on-query-change', (val) => {
|
||||
this.queryChange(val);
|
||||
});
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.dispatch('iSelect', 'remove');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -36,7 +36,7 @@
|
|||
import Icon from '../icon';
|
||||
import Drop from './dropdown.vue';
|
||||
import clickoutside from '../../directives/clickoutside';
|
||||
import { oneOf, MutationObserver, findComponentDownward } from '../../utils/assist';
|
||||
import { oneOf, findComponentDownward } from '../../utils/assist';
|
||||
import { t } from '../../locale';
|
||||
import Emitter from '../../mixins/emitter';
|
||||
|
||||
|
@ -506,22 +506,16 @@
|
|||
this.updateOptions(true);
|
||||
document.addEventListener('keydown', this.handleKeydown);
|
||||
|
||||
// watch slot changed
|
||||
// todo 在 child 的 mounted 和 beforeDestroy 里处理
|
||||
if (MutationObserver) {
|
||||
this.observer = new MutationObserver(() => {
|
||||
this.modelToQuery();
|
||||
this.slotChange();
|
||||
this.updateOptions(true, true);
|
||||
});
|
||||
|
||||
this.observer.observe(this.$refs.options, {
|
||||
// attributes: true,
|
||||
childList: true,
|
||||
characterData: true,
|
||||
subtree: true
|
||||
});
|
||||
}
|
||||
this.$on('append', () => {
|
||||
this.modelToQuery();
|
||||
this.slotChange();
|
||||
this.updateOptions(true, true);
|
||||
});
|
||||
this.$on('remove', () => {
|
||||
this.modelToQuery();
|
||||
this.slotChange();
|
||||
this.updateOptions(true, true);
|
||||
});
|
||||
|
||||
this.$on('on-select-selected', (value) => {
|
||||
if (this.model === value) {
|
||||
|
@ -556,9 +550,6 @@
|
|||
},
|
||||
beforeDestroy () {
|
||||
document.removeEventListener('keydown', this.handleKeydown);
|
||||
if (this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value (val) {
|
||||
|
|
Loading…
Add table
Reference in a new issue