update Select

support IE9
This commit is contained in:
梁灏 2017-03-30 11:52:36 +08:00
parent 345c6863bf
commit ed91d9b0c7
3 changed files with 49 additions and 34 deletions

View file

@ -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);
}
}
}

View file

@ -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>

View file

@ -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) {