uu

components/tpx-tags/tpx-tags.vue

@@ -1,9 +1,10 @@
 <template>
-	<view>
+	<u-row justify="between" align="top">
+		<view style="flex: 1 0 0;">
 			<tpx-checkitems :list="list" :type="type" :value="value"  v-slot="current" item-style="display:inline-block;"
 				:min-checked="minChecked" @onItemClick="handleoItemClick" @onChange="handleChange"
 			>
-			<view slot class="smp-tag">
+				<view v-if="(maxShowNum >= current.index +1) || showAll" slot class="smp-tag">
 					<u-tag :text="`${current.item.title}`" :plain="!current.checked" :type="mode" 
 						border-color="transparent" shape="circle" :bg-color="`${(current.checked || (mode == 'primary'))?activeColor:color}`" 
 						:color="`${(current.checked || (mode == 'primary'))?'#fff':'#666'}`" 
@@ -14,6 +15,11 @@
 				</view>
 			</tpx-checkitems>
 		</view>
+		<view v-if="list.length > maxShowNum && maxShowNum > 0 && !showAll" style="padding: 6rpx;" @click="handleShowMore">
+			<span class="font-24" style="padding-right: 6rpx;">更多</span>
+			<span class="iconfont icon-arrow-down"></span>
+		</view>
+	</u-row>
 </template>
 
 <script>
@@ -27,6 +33,7 @@
 			},
 			type: {
 			},
+			
 			// ======================== 分割线， 上方是 tpx-checkitems属性 ======================
 			closable: {
 				default () {
@@ -48,11 +55,15 @@
 					return '#de524e'
 				}
 			},
-			
+			maxShowNum: {
+				default () {
+					return undefined
+				}
+			},
 		},
 		data() {
 			return {
-				
+				showAll: !(this.maxShowNum > 0)
 			}
 		},
 		created() {
@@ -75,6 +86,9 @@
 			handleChange(val) {
 				this.$emit('onChange', val)
 				this.$emit('update:value', val)
+			},
+			handleShowMore(){
+				this.showAll = true
 			}
 		}
 	}