update Select component

update Select component:add filterable

update Select component
update Select component:add filterable
梁灏
1 parent e355dd49
Showing 4 changed files with 63 additions and 12 deletions Show diff stats
components/select/option-group.vue
components/select/option.vue
components/select/select.vue
local/routers/select.vue
@@ -18,7 +18,8 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                hidden: false    // for search
             }
         }
     }
 <template>
-    <li :class="classes" @click.stop="select" @mouseout.stop="blur"><slot>{{ showLabel }}</slot></li>
+    <li :class="classes" @click.stop="select" @mouseout.stop="blur" v-show="!hidden"><slot>{{ showLabel }}</slot></li>
 </template>
 <script>
     const prefixCls = 'ivu-select-item';
@@ -23,7 +23,9 @@
             return {
                 selected: false,
                 index: 0,    // for up and down to focus
-                isFocus: false
+                isFocus: false,
+                hidden: false,    // for search
+                searchLabel: ''    // the value is slot,only for search
             }
         },
         computed: {
@@ -51,14 +53,20 @@
             },
             blur () {
                 this.isFocus = false;
+            },
+            queryChange (val) {
+                this.hidden = !new RegExp(val, 'i').test(this.searchLabel);
             }
         },
         ready () {
-
+            this.searchLabel = this.$el.innerHTML;
         },
         events: {
             'on-select-close' () {
                 this.isFocus = false;
+            },
+            'on-query-change' (val) {
+                this.queryChange(val);
             }
         }
     }
@@ -16,7 +16,8 @@
                 v-if="filterable"
                 v-model="query"
                 :placeholder="placeholder"
-                :style="inputStyle">
+                :style="inputStyle"
+                @blur="handleBlur">
             <Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
             <Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon>
         </div>
@@ -209,6 +210,10 @@
                         child.selected = false;
                     });
                     this.model = '';
+
+                    if (this.filterable) {
+                        this.query = '';
+                    }
                 }
             },
             updateMultipleSelected (init = false) {
@@ -342,24 +347,32 @@
                 }
                 let child_status = {
-                    disabled: false
+                    disabled: false,
+                    hidden: false
                 };
+                let find_deep = false;    // can next find allowed
+
                 this.findChild((child) => {
                     if (child.index === this.focusIndex) {
                         child_status.disabled = child.disabled;
+                        child_status.hidden = child.hidden;
-                        if (!child.disabled) {
+                        if (!child.disabled && !child.hidden) {
                             child.isFocus = true;
                         }
                     } else {
                         child.isFocus = false;
                     }
+
+                    if (!child.hidden && !child.disabled) {
+                        find_deep = true;
+                    }
                 });
                 this.resetScrollTop();
-                if (child_status.disabled) {
+                if ((child_status.disabled || child_status.hidden) && find_deep) {
                     this.navigateOptions(direction);
                 }
             },
@@ -374,6 +387,23 @@
                 if (topOverflowDistance < 0) {
                     this.$refs.dropdown.$el.scrollTop += topOverflowDistance;
                 }
+            },
+            handleBlur () {
+                setTimeout(() => {
+                    const model = this.model;
+
+                    if (this.multiple) {
+
+                    } else {
+                        if (model !== '') {
+                            this.findChild((child) => {
+                                if (child.value === model) {
+                                    this.query = child.searchLabel;
+                                }
+                            });
+                        }
+                    }
+                }, 300);
             }
         },
         ready () {
@@ -397,6 +427,9 @@
                 } else {
                 }
+            },
+            query (val) {
+                this.$broadcast('on-query-change', val);
             }
         },
         events: {
@@ -413,6 +446,14 @@
                         }
                     } else {
                         this.model = value;
+
+                        if (this.filterable) {
+                            this.findChild((child) => {
+                                if (child.value === value) {
+                                    this.query = child.searchLabel;
+                                }
+                            });
+                        }
                     }
                 }
             }
@@ -4,7 +4,7 @@
         {{ city | json }}<br>
         <Button @click="city = 'hangzhou'">切换城市</Button>
         <br>
-        <i-select :model.sync="city" style="width:200px" @on-change="change">
+        <i-select v-if="true" :model.sync="city" style="width:200px" @on-change="change">
             <i-option-group label="热门城市">
                 <i-option value="beijing">北京市</i-option>
                 <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
@@ -38,11 +38,12 @@
         </i-select>
         <i-select :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
-            <i-option value="beijing">北京市</i-option>
+            <i-option value="beijing">北京</i-option>
             <i-option value="shanghai" label="上海市">上海市</i-option>
             <i-option value="shenzhen" disabled>深圳市</i-option>
             <i-option value="guangzhou" label="广州市">广州市2</i-option>
             <i-option value="shijiazhuang" disabled>石家庄市</i-option>
+            <!--<i-option value="shijiazhuang2">石家庄市2</i-option>-->
             <i-option value="a">a市</i-option>
             <i-option value="b">b市</i-option>
             <i-option value="c">c市</i-option>
@@ -50,8 +51,8 @@
             <i-option value="e">e市</i-option>
         </i-select>
-        <i-select :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
-            <i-option value="beijing">北京市</i-option>
+        <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable multiple>
+            <i-option value="beijing" label="北京市">北京2</i-option>
             <i-option value="shanghai">上海市</i-option>
             <i-option value="shenzhen" disabled>深圳市</i-option>
             <i-option value="guangzhou">广州市</i-option>