optimize Select event broadcast

optimize Select event broadcast

optimize Select event broadcast
梁灏
1 parent 04e5e3cd
Showing 3 changed files with 48 additions and 6 deletions Show diff stats
examples/routers/select.vue
src/components/select/select.vue
src/utils/assist.js
@@ -196,7 +196,16 @@
         <Row>
             <i-col span="12" style="padding-right:10px">
                 <Select v-model="model11" filterable>
-                    <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+                    <Option-group label="123">
+                        <i-option value="beijing">北京市</i-option>
+                        <i-option value="shanghai">上海市</i-option>
+                    </Option-group>
+                    <Option-group label="456">
+                        <i-option value="shenzhen">深圳市</i-option>
+                        <i-option value="hangzhou">杭州市</i-option>
+                    </Option-group>
+                    <i-option value="nanjing">南京市</i-option>
+                    <i-option value="chongqing">重庆市</i-option>
                 </Select>
             </i-col>
             <i-col span="12">
@@ -36,7 +36,7 @@
     import Icon from '../icon';
     import Drop from './dropdown.vue';
     import clickoutside from '../../directives/clickoutside';
-    import { oneOf, MutationObserver } from '../../utils/assist';
+    import { oneOf, MutationObserver, findComponentDownward } from '../../utils/assist';
     import { t } from '../../locale';
     import Emitter from '../../mixins/emitter';
  
@@ -507,6 +507,7 @@
             document.addEventListener('keydown', this.handleKeydown);
  
             // watch slot changed
+            // todo 在 child 的 mounted 和 beforeDestroy 里处理
             if (MutationObserver) {
                 this.observer = new MutationObserver(() => {
                     this.modelToQuery();
@@ -590,9 +591,12 @@
                 }
             },
             query (val) {
-                // todo 这里会重复
-                this.broadcast('OptionGroup', 'on-query-change', val);
-                this.broadcast('iOption', 'on-query-change', val);
+                if (findComponentDownward(this, 'OptionGroup')) {
+                    this.broadcast('OptionGroup', 'on-query-change', val);
+                    this.broadcast('iOption', 'on-query-change', val);
+                } else {
+                    this.broadcast('iOption', 'on-query-change', val);
+                }
                 let is_hidden = true;
  
                 this.$nextTick(() => {
@@ -183,4 +183,33 @@ function findComponentUpward (content, componentName, componentNames) {
     }
     return parent;
 }
-export {findComponentUpward};
 \ No newline at end of file
+export {findComponentUpward};
+
+// Find components downward
+function findComponentDownward (content, componentName) {
+    let childrens = content.$children;
+    let children = null;
+
+    if (childrens.length) {
+        childrens.forEach(child => {
+            const name = child.$options.name;
+            if (name === componentName) {
+                children = child;
+            }
+        });
+
+        for (let i = 0; i < childrens.length; i++) {
+            const child = childrens[i];
+            const name = child.$options.name;
+            if (name === componentName) {
+                children = child;
+                break;
+            } else {
+                children = findComponentDownward(child, componentName);
+                if (children) break;
+            }
+        }
+    }
+    return children;
+}
+export {findComponentDownward};
 \ No newline at end of file