update

w-rudolph · Sep 27, 2017 · 5b3f3f3 · 5b3f3f3
1 parent ef80138
commit 5b3f3f3
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/src/containers/Select.vue b/src/containers/Select.vue
@@ -30,7 +30,7 @@
             </d-select-group>
         </d-select>
         <h2>Disabled</h2>
-        <d-select v-model="city" :disabled="disabled" size="small" style="width: 200px" clearable>
+        <d-select v-model="city" :disabled="disabled" size="large" style="width: 200px" clearable>
             <d-select-option value="上海">上海</d-select-option>
             <d-select-option value="浙江">浙江</d-select-option>
             <d-select-option value="宁波">宁波</d-select-option>
@@ -41,7 +41,7 @@
 
         <h2>Multiple</h2>
         {{cities}}<br>
-        <d-select v-model="cities" size="small" style="width: 200px" multiple :disabled="disabled">
+        <d-select v-model="cities" size="large" style="width: 200px" multiple :disabled="disabled">
             <d-select-option value="上海">上海</d-select-option>
             <d-select-option value="浙江">浙江</d-select-option>
             <d-select-option value="宁波">宁波</d-select-option>

diff --git a/src/packages/sass/select.scss b/src/packages/sass/select.scss
@@ -46,6 +46,21 @@
             }
         }
     }
+    &--small{
+        .d-select-placeholder{
+            font-size: 12px;
+        }
+    }
+    &--large{
+        .d-select-placeholder{
+            font-size: 16px;
+        }
+        .d-select-tags{
+            min-height: 40px;
+            font-size: 16px;
+            padding: 6px 12px;
+        }
+    }
 }
 .d-select-arrow,
 .d-select-clear {
@@ -126,3 +141,16 @@
         padding: 4px
     }
 }
+
+.d-select-placeholder{
+    font-size: 14px;
+    padding: 4px 0;
+    color: #243242;
+    outline: none;
+    background-color: #fff;
+    background-image: none;
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    user-select: none;
+}
diff --git a/src/packages/select/select.vue b/src/packages/select/select.vue
@@ -3,7 +3,8 @@
         <div ref="reference" class="d-select-reference" @mouseenter="onMouseEnter" @mouseleave="onMouseLeave">
             <template v-if="multiple">
                 <div class="d-select-tags">
-                    <d-tag closable type="info" :disabled="disabled" v-for="(item, index) in select_value" :key="index" @close="handleTagClose(item, $event)">{{item}}</d-tag>
+                    <d-tag closable type="info" :disabled="disabled" v-for="item in select_value" :key="item" @close="handleTagClose(item, $event)">{{item}}</d-tag>
+                    <input readonly v-if="!select_value.length" :placeholder="placeholder" class="d-select-placeholder"></input>
                 </div>
             </template>
             <template v-else>