增加 单选、多选组件

components/tpx-checkitems/tpx-checkitems.vue

@@ -0,0 +1,102 @@
+<template>
+	<view v-for="(item, index) in list" :style="itemStyle"
+		@click="handleCheckBoxClick(item, index)"  
+	>
+		<slot :item="item" :index="index" :checked="checkedVal.indexOf(item.val)>-1" :handleCheckFun="()=> { handleCheckBoxClick(item, index) }"
+		></slot>
+	</view>
+</template>
+
+<script>
+	const typeEnum = {
+		single: 'single',
+		multiple: 'multiple'
+	}
+
+	export default {
+		computed: {
+			checkedVal() {
+				let val = this.value
+				let res = []
+				if (typeof val == "object") {
+					res = val
+				}
+				if (typeof val == 'string' && val !== '') {
+					res = val.split(",")
+				}
+				if (typeof val == 'number') {
+					res = [val]
+				}
+				return res
+			},
+		},
+		props: {
+			list: {
+				default () {
+					return []
+				}
+			},
+			value: {
+				default () {
+					return []
+				}
+			},
+			type: {
+				default () {
+					return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
+				}
+			},
+			itemStyle: {
+				default () {
+					return ''
+				}
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		created() {
+
+		},
+		onHide() {
+
+		},
+		destroyed() {},
+
+		methods: {
+			handleCheckBoxClick(curItem, index) {
+				let checkedVal = [].concat(this.checkedVal)
+				if (this.type) {
+					const curVal = curItem.val
+					const hasChked = checkedVal.indexOf(curVal) > -1
+					if (hasChked) {
+						checkedVal = checkedVal.filter(val => val != curVal)
+					} else {
+						if (this.type == typeEnum.multiple) {
+							checkedVal.push(curVal)
+						} else {
+							checkedVal = [curVal]
+						}
+					}
+					this.changeTabCheck(checkedVal)
+				}
+				this.$emit('onItemClick', { curItem, index, checked: checkedVal.indexOf(curItem.val)>-1 })
+			},
+			changeTabCheck(checkedVal) {
+				let oldVal = checkedVal
+				let val = oldVal
+				if (this.type == typeEnum.single) {
+					val = checkedVal[0]
+				}
+				this.$emit('onChange', val)
+				this.$emit('update:value', val)
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+
+</style>

components/tpx-tags/tpx-tags.vue

@@ -1,55 +1,31 @@
 <template>
 	<view>
-		<view class="smp-tag" v-for="(item, dIndex) in list">
+		<tpx-checkitems :list="list" :type="type" :value="value"  v-slot="current" item-style="display:inline-block;"
-			<u-tag :text="`${item.title}`" :plain="!checkedVal.indexOf(item.val) > -1" :type="mode" 
+			@onItemClick="handleoItemClick" @onChange="handleChange"
-				border-color="transparent" shape="circle" :bg-color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?activeColor:color}`" 
+		>
-				:color="`${(checkedVal.indexOf(item.val)>-1 || (mode == 'primary'))?'#fff':'#666'}`" 
+			<view slot class="smp-tag">
-				@click="handleCheckBoxClick(item)" @close="handleDeleteItem(item)" :closable="closable">
+				<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'}`" 
+					@close="handleDeleteItem(current.item)" :closable="closable" 
+					@click="current.handleCheckFun" 
+				>
 				</u-tag>
 			</view>
+		</tpx-checkitems>
 	</view>
 </template>
 
 <script>
-	
-	const typeEnum = {
-		single: 'single',
-		multiple: 'multiple'
-	}
-	
 	export default {
-		computed: {
-			checkedVal() {
-				let val = this.value
-				let res = []
-				if(typeof val == "object") {
-					res = val
-				}
-				if(typeof val == 'string' && val !== '') {
-					res = val.split(",")
-				}
-				if(typeof val == 'number') {
-					res = [val]
-				}
-				return res
-			},
-		},
 		props: {
 			list: {
-				default () {
-					return []
-				}
 			},
 			value: {
-				default () {
-					return []
-				}
 			},
 			type: {
-				default () {
-					return typeEnum.multiple // typeEnum | ''; 为空代表不做切换选中功能
-				}
 			},
+			// ======================== 分割线， 上方是 tpx-checkitems属性 ======================
 			closable: {
 				default () {
 					return false  
@@ -86,36 +62,15 @@
 		destroyed() {},
 		
 		methods: {
-			handleCheckBoxClick(curItem) {
-				if(this.type) {
-					const curVal = curItem.val
-					let checkedVal = [].concat(this.checkedVal)
-					const hasChked = checkedVal.indexOf(curVal) > -1
-					if(hasChked) {
-						checkedVal = checkedVal.filter(val=> val != curVal)
-					} else {
-						if(this.type == typeEnum.multiple) {
-							checkedVal.push(curVal)
-						} else {
-							checkedVal = [curVal]
-						}
-					}
-					this.changeTabCheck(checkedVal)
-				}
-				this.$emit('onItemClick', curItem)
-			},
 			handleDeleteItem(curItem) {
 				const newList = this.list.filter(t=> t.val != curItem.val)
-				this.$emit('onChange', newList)
+				this.$emit('onDelate', newList)
 				this.$emit('update:list', newList)
 			},
-			changeTabCheck(checkedVal) {
+			handleoItemClick({ curItem }) {
-				let oldVal = checkedVal
+				this.$emit('onItemClick', curItem)
-				let val = oldVal
+			},
-				if(this.type == typeEnum.single) {
+			handleChange(val) {
-					val = checkedVal[0]
-				}
-				
 				this.$emit('onChange', val)
 				this.$emit('update:value', val)
 			}