update Select component

update Select component:filterable

update Select component
update Select component:filterable
梁灏
1 parent e4ebd304
Showing 4 changed files with 81 additions and 31 deletions Show diff stats
components/select/option-group.vue
components/select/select.vue
local/routers/select.vue
styles/components/select.less
@@ -18,8 +18,7 @@
         },
         data () {
             return {
-                prefixCls: prefixCls,
-                hidden: false    // for search
+                prefixCls: prefixCls
             }
         }
     }
@@ -12,17 +12,21 @@
             <span :class="[`${prefixCls}-selected-value`]" v-show="!showPlaceholder && !multiple && !filterable">{{ selectedSingle }}</span>
             <input
                 type="text"
-                :class="[`${prefixCls}-input`]"
                 v-if="filterable"
                 v-model="query"
-                :placeholder="placeholder"
+                :class="[`${prefixCls}-input`]"
+                :placeholder="showPlaceholder ? placeholder : ''"
                 :style="inputStyle"
-                @blur="handleBlur">
+                @blur="handleBlur"
+                @keydown="resetInputState"
+                @keydown.delete="handleInputDelete"
+                v-el:input>
             <Icon type="ios-close" :class="[`${prefixCls}-arrow`]" v-show="showCloseIcon" @click.stop="clearSingleSelect"></Icon>
             <Icon type="arrow-down-b" :class="[`${prefixCls}-arrow`]"></Icon>
         </div>
         <Dropdown v-show="visible" transition="slide-up" v-ref:dropdown>
-            <ul :class="[`${prefixCls}-dropdown-list`]"><slot></slot></ul>
+            <ul v-show="notFound" :class="[`${prefixCls}-not-found`]"><li>未找到</li></ul>
+            <ul v-else :class="[`${prefixCls}-dropdown-list`]"><slot></slot></ul>
         </Dropdown>
     </div>
 </template>
@@ -85,7 +89,8 @@
                 selectedMultiple: [],
                 focusIndex: 0,
                 query: '',
-                inputLength: 20
+                inputLength: 20,
+                notFound: false
             }
         },
         computed: {
@@ -124,7 +129,11 @@
                 let style = {};
                 if (this.multiple) {
-                    style.width = `${this.inputLength}px`;
+                    if (this.showPlaceholder) {
+                        style.width = '100%';
+                    } else {
+                        style.width = `${this.inputLength}px`;
+                    }
                 }
                 return style;
@@ -245,6 +254,12 @@
                     return false;
                 }
                 this.model.splice(index, 1);
+
+                if (this.filterable && this.visible) {
+                    this.$els.input.focus();
+                }
+
+                this.$broadcast('on-update-popper');
             },
             // to select option for single
             toggleSingleSelected (value, init = false) {
@@ -404,6 +419,14 @@
                         }
                     }
                 }, 300);
+            },
+            resetInputState () {
+                this.inputLength = this.$els.input.value.length * 12 + 20;
+            },
+            handleInputDelete () {
+                if (this.multiple && this.model.length && this.query === '') {
+                    this.removeTag(this.model.length - 1);
+                }
             }
         },
         ready () {
@@ -423,6 +446,9 @@
             },
             visible (val) {
                 if (val) {
+                    if (this.multiple && this.filterable) {
+                        this.$els.input.focus();
+                    }
                     this.$broadcast('on-update-popper');
                 } else {
@@ -430,6 +456,16 @@
             },
             query (val) {
                 this.$broadcast('on-query-change', val);
+                let is_hidden = true;
+
+                this.$nextTick(() => {
+                    this.findChild((child) => {
+                        if (!child.hidden) {
+                            is_hidden = false;
+                        }
+                    });
+                    this.notFound = is_hidden;
+                });
             }
         },
         events: {
@@ -443,6 +479,12 @@
                             this.removeTag(index);
                         } else {
                             this.model.push(value);
+                            this.$broadcast('on-update-popper');
+                        }
+
+                        if (this.filterable) {
+                            this.query = '';
+                            this.$els.input.focus();
                         }
                     } else {
                         this.model = value;
@@ -4,7 +4,7 @@
         {{ city | json }}<br>
         <Button @click="city = 'hangzhou'">切换城市</Button>
         <br>
-        <i-select v-if="true" :model.sync="city" style="width:200px" @on-change="change">
+        <i-select v-if="true" :model.sync="city" style="width:200px" filterable @on-change="change">
             <i-option-group label="热门城市">
                 <i-option value="beijing">北京市</i-option>
                 <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
@@ -13,31 +13,16 @@
             <i-option-group label="二线城市">
                 <i-option value="nanjing">南京市</i-option>
                 <i-option value="hangzhou">杭州市</i-option>
+                <i-option value="heilongjiang" disabled>黑龙江市</i-option>
             </i-option-group>
-            <i-option value="heilongjiang" disabled>黑龙江市</i-option>
-            <i-option-group label="热门城市">
-                <i-option value="beijing">北京市</i-option>
-                <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
-                <i-option value="shenzhen">深圳市</i-option>
-            </i-option-group>
-            <i-option-group label="二线城市">
-                <i-option value="nanjing">南京市</i-option>
-                <i-option value="hangzhou">杭州市</i-option>
-            </i-option-group>
-            <i-option value="heilongjiang" disabled>黑龙江市</i-option>
-            <i-option-group label="热门城市">
-                <i-option value="beijing">北京市</i-option>
-                <i-option value="shanghai" disabled label="上海市">上海市2</i-option>
-                <i-option value="shenzhen">深圳市</i-option>
-            </i-option-group>
-            <i-option-group label="二线城市">
-                <i-option value="nanjing">南京市</i-option>
-                <i-option value="hangzhou">杭州市</i-option>
+            <i-option-group label="其它城市">
+                <i-option value="jyg">嘉峪关市</i-option>
+                <i-option value="lanzhou">兰州市</i-option>
+                <i-option value="beijingxi">北京西</i-option>
             </i-option-group>
-            <i-option value="heilongjiang" disabled>黑龙江市</i-option>
         </i-select>
-        <i-select :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
+        <i-select v-show="true" :model.sync="focus" style="width:200px" @on-change="change" clearable filterable label-in-value>
             <i-option value="beijing">北京</i-option>
             <i-option value="shanghai" label="上海市">上海市</i-option>
             <i-option value="shenzhen" disabled>深圳市</i-option>
@@ -51,6 +36,19 @@
             <i-option value="e">e市</i-option>
         </i-select>
+        <i-select v-if="true" :model.sync="focus2" style="width:300px" @on-change="change" clearable filterable 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>
+            <i-option value="shijiazhuang">石家庄市</i-option>
+            <i-option value="a">a1市</i-option>
+            <i-option value="b">b2市</i-option>
+            <i-option value="c">c1市</i-option>
+            <i-option value="d">d2市</i-option>
+            <i-option value="e">e1市</i-option>
+        </i-select>
+
         <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>
@@ -84,7 +82,7 @@
             return {
                 city: '',
                 focus: '',
-                focus2: ['beijing', 'guangzhou', 'b']
+                focus2: ['beijing']
 //                focus2: []
             }
         },
@@ -163,6 +163,17 @@
     &-small &-input{
         height: @input-height-small;
     }
+
+    &-multiple &-input{
+        height: 25px;
+        line-height: 28px;
+        padding: 0 0 0 6px;
+    }
+
+    &-not-found{
+        text-align: center;
+        color: @btn-disable-color;
+    }
 }
 .@{select-item-prefix-cls} {