Select add prefix prop and slot. close #5477

梁灏
1 parent 707898f2
Showing 4 changed files with 73 additions and 8 deletions Show diff stats
examples/routers/select.vue
src/components/select/select-head.vue
src/components/select/select.vue
src/styles/components/select.less
 <template>
-    <div style="margin: 200px;">
-        <Select size="small" v-model="model10" multiple style="width:260px">
+    <div style="margin: 100px;">
+        <Select v-model="model1" 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" multiple style="width:260px">
+
+        <Select v-model="model10" multiple style="width:260px" prefix="ios-albums">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
-        <Select size="large" v-model="model10" multiple style="width:260px">
+
+        <br><br>
+
+        <Select v-model="model1" style="width:200px">
+            <Icon type="ios-alarm" slot="prefix" color="red" />
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+
+        <Select v-model="model1" style="width:200px">
+            <Avatar src="https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar" slot="prefix" size="small" />
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+
+        <Select v-model="model10" multiple style="width:260px" prefix="ios-albums">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+
+        <br><br>
+
+        <Select size="small" v-model="model1" style="width:200px" prefix="ios-albums">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+
+        <Select size="small" v-model="model10" multiple style="width:260px" prefix="ios-albums">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+
+        <br><br>
+
+        <Select size="large" v-model="model1" style="width:200px" prefix="ios-albums">
+            <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
+        </Select>
+
+        <Select size="large" v-model="model10" multiple style="width:260px" prefix="ios-albums">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
     </div>
@@ -22,7 +56,7 @@
                     },
                     {
                         value: 'London',
-                        label: 'LondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondonLondon'
+                        label: 'London'
                     },
                     {
                         value: 'Sydney',
@@ -41,7 +75,8 @@
                         label: 'Canberra'
                     }
                 ],
-                model10: ['New York', 'London']
+                model1: '',
+                model10: []
             }
         }
     }
 <template>
     <div @click="onHeaderClick">
+        <span :class="[prefixCls + '-prefix']" v-if="$slots.prefix || prefix">
+            <slot name="prefix">
+                <Icon :type="prefix" v-if="prefix" />
+            </slot>
+        </span>
         <div class="ivu-tag ivu-tag-checked" v-for="item in selectedMultiple">
             <span class="ivu-tag-text">{{ item.label }}</span>
             <Icon type="ios-close" @click.native.stop="removeTag(item)"></Icon>
@@ -77,7 +82,10 @@
             queryProp: {
                 type: String,
                 default: ''
-            }
+            },
+            prefix: {
+                type: String
+            },
         },
         data () {
             return {
@@ -92,6 +100,7 @@
             singleDisplayClasses(){
                 const {filterable, multiple, showPlaceholder} = this;
                 return [{
+                    [prefixCls + '-head-with-prefix']: this.$slots.prefix || this.prefix,
                     [prefixCls + '-placeholder']: showPlaceholder && !filterable,
                     [prefixCls + '-selected-value']: !showPlaceholder && !multiple && !filterable,
                 }];
@@ -33,6 +33,7 @@
                     :multiple="multiple"
                     :values="values"
                     :clearable="canBeCleared"
+                    :prefix="prefix"
                     :disabled="disabled"
                     :remote="remote"
                     :input-element-id="elementId"
@@ -44,7 +45,9 @@
                     @on-input-focus="isFocused = true"
                     @on-input-blur="isFocused = false"
                     @on-clear="clearSingleSelect"
-                />
+                >
+                    <slot name="prefix" slot="prefix"></slot>
+                </select-head>
             </slot>
         </div>
         <transition name="transition-drop">
@@ -235,6 +238,9 @@
             transferClassName: {
                 type: String
             },
+            prefix: {
+                type: String
+            },
         },
         mounted(){
             this.$on('on-select-selected', this.onOptionClick);
@@ -256,6 +256,21 @@
     & &-dropdown{
         width: auto;
     }
+
+    &-prefix{
+        display: inline-block;
+        vertical-align: middle;
+    }
+    &-head-with-prefix{
+        display: inline-block !important;
+        vertical-align: middle;
+    }
+    &-single &-prefix{
+        padding-left: 4px;
+    }
+    &-single &-head-with-prefix, &-multiple &-head-with-prefix{
+        padding-left: 0 !important;
+    }
 }
  
 .select-item(@select-prefix-cls, @select-item-prefix-cls);