update Select

support IE9

update Select
support IE9
梁灏
1 parent 345c6863
Showing 3 changed files with 49 additions and 34 deletions Show diff stats
examples/routers/select.vue
src/components/select/option.vue
src/components/select/select.vue
@@ -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) {