fix #5568 ,close #5571

梁灏
1 parent cd791ec1
Showing 4 changed files with 33 additions and 6 deletions Show diff stats
examples/routers/select.vue
src/components/select/select-head.vue
src/components/select/select.vue
src/styles/components/select.less
@@ -4,7 +4,7 @@
             <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">
+        <Select v-model="model10" :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>
  
@@ -20,7 +20,7 @@
             <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">
+        <Select v-model="model10" :max-tag-count="3" max-tag-placeholder="more" multiple style="width:400px" prefix="ios-albums">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
  
@@ -30,7 +30,7 @@
             <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">
+        <Select size="small" v-model="model10" multiple style="width:400px" prefix="ios-albums">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
  
@@ -40,7 +40,7 @@
             <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">
+        <Select size="large" v-model="model10" multiple style="width:400px" prefix="ios-albums">
             <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
         </Select>
     </div>
@@ -5,9 +5,17 @@
                 <Icon :type="prefix" v-if="prefix" />
             </slot>
         </span>
-        <div class="ivu-tag ivu-tag-checked" v-for="item in selectedMultiple">
+        <div
+            class="ivu-tag ivu-tag-checked"
+            v-for="(item, index) in selectedMultiple"
+            v-if="maxTagCount === undefined || index < maxTagCount">
             <span class="ivu-tag-text">{{ item.label }}</span>
             <Icon type="ios-close" @click.native.stop="removeTag(item)"></Icon>
+        </div><div class="ivu-tag ivu-tag-checked" v-if="maxTagCount !== undefined && selectedMultiple.length > maxTagCount">
+            <span class="ivu-tag-text ivu-select-max-tag">
+                <template v-if="maxTagPlaceholder">{{ maxTagPlaceholder }}</template>
+                <template v-else>+ {{ selectedMultiple.length - maxTagCount }}...</template>
+            </span>
         </div>
         <span
             :class="singleDisplayClasses"
@@ -86,6 +94,14 @@
             prefix: {
                 type: String
             },
+            // 3.4.0
+            maxTagCount: {
+                type: Number
+            },
+            // 3.4.0
+            maxTagPlaceholder: {
+                type: String
+            }
         },
         data () {
             return {
@@ -41,6 +41,8 @@
                     :initial-label="initialLabel"
                     :placeholder="placeholder"
                     :query-prop="query"
+                    :max-tag-count="maxTagCount"
+                    :max-tag-placeholder="maxTagPlaceholder"
  
                     @on-query-change="onQueryChange"
                     @on-input-focus="isFocused = true"
@@ -239,9 +241,18 @@
             transferClassName: {
                 type: String
             },
+            // 3.4.0
             prefix: {
                 type: String
             },
+            // 3.4.0
+            maxTagCount: {
+                type: Number
+            },
+            // 3.4.0
+            maxTagPlaceholder: {
+                type: String
+            }
         },
         mounted(){
             this.$on('on-select-selected', this.onOptionClick);
@@ -208,7 +208,7 @@
         margin: 3px 4px 3px 0;
         max-width: 99%;
         position: relative;
-        span{
+        span:not(.ivu-select-max-tag){
             display: block;
             margin-right: 14px;
             overflow: hidden;