update Select style with filterable & prefix

梁灏
1 parent 90399f84
Showing 3 changed files with 26 additions and 4 deletions Show diff stats
examples/routers/select.vue
src/components/select/select-head.vue
src/styles/components/select.less
 <template>
     <div style="margin: 100px;">
-        <Select v-model="model1" style="width:200px" prefix="ios-albums">
+        <Select v-model="model1" filterable style="width:200px" prefix="ios-albums">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
  
-        <Select v-model="model10" :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
+        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+
+        <Select v-model="model10" filterable :max-tag-count="2" multiple style="width:400px" prefix="ios-albums">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
  
 <template>
-    <div @click="onHeaderClick">
+    <div @click="onHeaderClick" :class="headCls">
         <span :class="[prefixCls + '-prefix']" v-if="$slots.prefix || prefix">
             <slot name="prefix">
                 <Icon :type="prefix" v-if="prefix" />
@@ -168,6 +168,12 @@
             },
             selectedMultiple(){
                 return this.multiple ? this.values : [];
+            },
+            // 使用 prefix 时，在 filterable
+            headCls () {
+                return {
+                    [`${prefixCls}-head-flex`]: this.filterable && (this.$slots.prefix || this.prefix)
+                };
             }
         },
         methods: {
@@ -185,7 +185,7 @@
     }
  
     &-multiple &-input{
-        height: @input-height-base - 3px;
+        height: @input-height-base - 2px;
         line-height: @input-height-base;
         padding: 0 0 0 4px;
     }
@@ -260,6 +260,9 @@
     &-prefix{
         display: inline-block;
         vertical-align: middle;
+        i{
+            vertical-align: top;
+        }
     }
     &-head-with-prefix{
         display: inline-block !important;
@@ -271,6 +274,15 @@
     &-single &-head-with-prefix, &-multiple &-head-with-prefix{
         padding-left: 0 !important;
     }
+
+    &-head-flex{
+        display: flex;
+        align-items: center;
+    }
+
+    &-multiple &-head-flex &-prefix{
+        margin-right: 4px;
+    }
 }
  
 .select-item(@select-prefix-cls, @select-item-prefix-cls);