From 90399f84940fd759b029748f2552d38e9b605e38 Mon Sep 17 00:00:00 2001
From: 梁灏 <admin@aresn.com>
Date: Tue, 9 Apr 2019 10:45:01 +0800
Subject: [PATCH] fix #5568 ,close #5571

---
 examples/routers/select.vue           |  8 ++++----
 src/components/select/select-head.vue | 18 +++++++++++++++++-
 src/components/select/select.vue      | 11 +++++++++++
 src/styles/components/select.less     |  2 +-
 4 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/examples/routers/select.vue b/examples/routers/select.vue
index 31413e9..bf2ab8c 100644
--- a/examples/routers/select.vue
+++ b/examples/routers/select.vue
@@ -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>
diff --git a/src/components/select/select-head.vue b/src/components/select/select-head.vue
index 30856f7..e7c0685 100644
--- a/src/components/select/select-head.vue
+++ b/src/components/select/select-head.vue
@@ -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 {
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 22ac9c1..fe17c09 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -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);
diff --git a/src/styles/components/select.less b/src/styles/components/select.less
index e5c6052..73d7227 100644
--- a/src/styles/components/select.less
+++ b/src/styles/components/select.less
@@ -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;
--
libgit2 0.21.4