From 9013c49d7c9b0a04200a98705bd128c3e7df5864 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Tue, 9 Apr 2019 11:42:07 +0800
Subject: [PATCH] update Select style with filterable & prefix

---
 examples/routers/select.vue           |  8 ++++++--
 src/components/select/select-head.vue |  8 +++++++-
 src/styles/components/select.less     | 14 +++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index bf2ab8cb..3c3e8f4c 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -1,10 +1,14 @@
 <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>
 
diff --git a/src/components/select/select-head.vue b/src/components/select/select-head.vue
index e7c06851..ce2d166e 100644
--- a/src/components/select/select-head.vue
+++ b/src/components/select/select-head.vue
@@ -1,5 +1,5 @@
 <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: {
diff --git a/src/styles/components/select.less b/src/styles/components/select.less
index 73d72271..1328b16d 100644
--- a/src/styles/components/select.less
+++ b/src/styles/components/select.less
@@ -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);