fs-uni-template/components/fs-checkbox/fs-checkbox.vue

<template>
	<view
		class="fs-checkbox"
		:class="[justify, { 'fs-checkbox-reverse': reverse, 'fs-checkbox-inline': inline }]"
		@click="handleToggle"
	>
		<fs-icon
			v-if="icon"
			source="out"
			:type="selected ? selectIcon || icon : icon"
			:colorType="selected ? checkedColorType : 'gray'"
			:size="iconSize"
			:color="checkedColor"
		></fs-icon>
		<fs-icon
			v-else
			:type="selected ? 'icon-squarecheck' : 'icon-square'"
			:colorType="selected ? checkedColorType : 'gray'"
			:size="iconSize"
			:color="checkedColor"
		></fs-icon>
		<view class="fs-checkbox-lable">
			{{ label }}
			<slot />
		</view>
	</view>
</template>

<script>
/**
 * 多选框组件
 * @description 多选框组件
 * @property {String} label 文本
 * @property {String} icon 自定义图标
 * @property {String} iconSize 图标大小
 * @property {String} selectIcon 自定义选中图标
 * @property {null} value 标识符(必须传)
 * @property {String} checkedColor 选中颜色
 * @property {String} checkedColorType = [primary | danger | warning | info | success] 选中颜色类型
 */
export default {
	name: 'fs-checkbox'
}
</script>

<script setup>
import { inject, watch, toRefs, ref, computed } from 'vue'

const props = defineProps({
	label: String,
	icon: String,
	selectIcon: String,
	iconSize: {
		type: String,
		default: '40rpx'
	},
	value: {
		type: null,
		required: true
	},
	checkedColor: String,
	checkedColorType: {
		type: String,
		default: 'primary',
		validator(value) {
			return ['primary', 'success', 'info', 'warning', 'danger'].includes(value)
		}
	}
})

const checkboxGroup = inject('checkboxGroup')
const { reverse, inline, justify } = checkboxGroup

let selected = ref(false)
checkboxGroup.updateChildren({
	selected,
	value: props.value
})

const handleToggle = () => {
	checkboxGroup.updateValue(props.value)
}
</script>

<style lang="scss" scoped>
.fs-checkbox {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: 14rpx;

	&-lable {
		margin-left: 6rpx;
		margin-right: 20rpx;
	}

	&-reverse {
		flex-direction: row-reverse;
		justify-content: flex-end;
	}
	&-reverse &-lable {
		margin-left: 0;
		margin-right: 6rpx;
	}

	&.right {
		justify-content: space-between;
	}
}
</style>