From ed91d9b0c7d3dcbf2cbc08f4cc53ab950e68f3e2 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Thu, 30 Mar 2017 11:52:36 +0800
Subject: [PATCH] update Select

---
 examples/routers/select.vue      | 48 ++++++++++++++++++++++++++++++++++--------------
 src/components/select/option.vue |  4 ++++
 src/components/select/select.vue | 31 +++++++++++--------------------
 3 files changed, 49 insertions(+), 34 deletions(-)

diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index 813b530..a97b620 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/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);
             }
         }
     }
diff --git a/src/components/select/option.vue b/src/components/select/option.vue
index bef7dbf..da1ddf7 100644
--- a/src/components/select/option.vue
+++ b/src/components/select/option.vue
@@ -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>
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 21034b0..f7b81ca 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -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) {
--
libgit2 0.21.4