uniapp封装自定义checkbox组件，支持多选&单选(微信小程序和H5)

uniapp封装自定义checkbox组件，可以兼容多选&&单选功能（H5&微信小程序均可使用，其它未测试）
isMulti——true多选，false单选；
columnNum——每行展示数量，默认3个；

<!--
* @author chris
* @date 2023/3/31 9:43
-->
<template>
	<view class="ys-checkbox" :class="{'plain': isPlain}">
		<view class="ys-checkbox-tag"
					:style="'width:calc((100% - ' + (10 * columnNum) + 'px) / ' + columnNum + ')'"
					:class="{
							'is-active': isActive(item),
							'mr-0': isMr0(index,item),
							'not-allowed': disabled,
							'is-disabled': item.disabled
						}"
					v-for="(item, index) in list" :key="index" @click="checkboxChange(item)">
			{{ item.label }}
		</view>
	</view>
</template>

<script>
	export default {
		name: "CheckBox",
		model: {
			prop: "value",
			event: "input"
		},
		props: {
			//默认选择值
			value: {
				type: String | Array | Object | Boolean | Number
			},
			list: {
				type: Array, default: () => {
					return [
						{ label: "香蕉", value: 1 },
						{ label: "苹果", value: 2 },
						{ label: "草莓", value: 3 },
						{ label: "水蜜桃", value: 4 },
						{ label: "红提", value: 5 },
						{ label: "荔枝", value: 6 },
						{ label: "火龙果", value: 7 }
					]
				}
			},
			//一行几个,默认3个
			columnNum: { type: Number, default: 3 },
			//是否为多选
			isMulti: { type: Boolean },
			//是否禁用
			disabled: { type: Boolean },
			//是否为镂空模式
			isPlain: { type: Boolean }
		},
		data() {
			return {}
		},
		computed: {
			selectVal: {
				get() {
					// 获取传入的v-model
					return this.value;
				},
				set(newVal) {
					this.$emit("input", newVal)
					return newVal;
				}
			}
		},
		methods: {
			/**
			 * 选择全部选项（仅支持多选全选）
			 */
			selectAll() {
				if (this.isMulti) {
					let selectValues = this.list.map(item => {
						return item.value
					})
					this.$emit("input", selectValues);
					this.$emit("change", selectValues);
				}
			},
			/**
			 * 取消选择全部选项
			 */
			cancelSelectAll(value) {
				if (this.isMulti) {
					let selectValues = value
					this.$emit("input", selectValues);
					this.$emit("change", selectValues);
				}
			},
			checkboxChange(data) {
				if (this.disabled || data.disabled) return;
				let selectValue = this.selectVal
				if (this.isMulti) {
					let active = selectValue.indexOf(data.value)
					if (active >= 0) {
						selectValue.splice(active, 1)
					} else {
						selectValue.push(data.value)
					}
				} else {
					selectValue = data.value;
				}
				this.$emit("input", selectValue);
				this.$emit("change", selectValue);
			},
			//选中效果-条件判断
			isActive(item) {
				return Boolean((this.selectVal === item.value && ((typeof (this.selectVal) !== "object") || this.selectVal === null)) ||
					(typeof (this.selectVal) === "object" && this.selectVal !== null && this.selectVal.includes(item.value)))
			},
			//判断是否为每行最后一个
			isMr0(index, item) {
				return ((index + 1) % this.columnNum) === 0;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ys-checkbox {
		display: flex;
		flex-wrap: wrap;

		&-tag {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10px 15px 0;
			//text-align: center;
			padding: 8px 0;
			font-size: 13px;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.85);
			line-height: 18px;
			border: 1px solid transparent;
			background: rgba(0, 0, 0, 0.04);
			border-radius: 22px 22px 22px 22px;

			&.mr-0 {
				margin-right: 0;
			}

			.not-allowed {
				cursor: not-allowed;
			}

			&.is-disabled {
				opacity: 0.6;
				cursor: not-allowed;
			}
		}

		.is-active {
			color: #FFFFFF;
			border-color: #3662EC;
			background: #3662EC;
		}

		&.plain {
			.ys-checkbox-tag {
				color: rgba(0, 0, 0, 0.6);
				background: #FFFFFF;
				border: 1px solid rgba(0, 0, 0, 0.08);
			}

			.is-active {
				color: #3662EC;
				background: rgba(54, 98, 236, 0.06);
				border: 1px solid #3662EC;
			}
		}
	}
</style>

默认样式：

<template>
  <CheckBox v-model="value1" :list="options1" :column-num="3"/>
</template>

<script>
  export default {
    data() {
      return {
        value1: 1,
        options1:[
          { label: "餐饮", value: 1 },
		  { label: "销售", value: 2 },
		  { label: "服务", value: 3 },
		  { label: "文体", value: 4 },
		  { label: "贸易", value: 5 },
		  { label: "食品饮料", value: 6 },
		  { label: "国防军工", value: 7 },
		  { label: "旅游业", value: 8 },
		  { label: "家电", value: 9 },
        ]
      };
    }
  };
</script>

isPlain镂空样式：

使用方法：

<template>
  <CheckBox v-model="value2" :list="options2" is-plain :column-num="2"/>
</template>

<script>
  export default {
    data() {
      return {
        value2: null,
        options2:[
          { label: "不限", value: null },
		  { label: "1年以下", value: "0,1" },
		  { label: "1-3年", value: "1,3" },
		  { label: "4-7年", value: "4,7" },
		  { label: "8-10年", value: "8,10" },
		  { label: "10-15年", value: "10,15" },
        ]
      };
    }
  };
</script>