自定义形状与颜色的复选框 Vue 组件

精选原创

三线码工 2024-08-05 13:34:48 ©著作权

文章标签 ico 自定义复选框 文章分类 Vue.js 前端开发

©著作权归作者所有：来自51CTO博客作者三线码工的原创作品，请联系作者获取转载授权，否则将追究法律责任

自定义形状与颜色的复选框 Vue 组件_复选框

概述

本文将介绍一个 Vue.js 复选框组件的实现，该组件支持自定义形状（正方形或圆形）和颜色。通过简单的 prop 配置，你可以轻松地在项目中使用这个组件，并根据需要定制其外观。

组件功能

自定义形状：可以选择正方形或圆形。
自定义颜色：可以设置复选框选中状态的颜色。
响应式：点击时会切换选中状态，并触发事件通知外部。

安装与使用

确保你的项目已经安装了 Vue.js 和 uni-app 相关的依赖包。

创建组件文件：创建一个名为 CheckIcon.vue 的文件，并将以下代码复制到文件中。
引入组件：在你需要使用该组件的页面中引入并注册它。

示例代码

<template>
	<view class="he-checkbox" :class="[value ? 'he-checkbox--checked' : '', shapeClass]" @click="toggle">
		<uni-icons v-if="value" type="checkmarkempty" size="16" color="#fff"></uni-icons>
	</view>
</template>

<script>
	export default {
		name: "checkIcon",
		props: {
			check: {
				type: Boolean,
				default: false,
			},
			shape: {
				type: String,
				default: 'square',
				validator(value) {
					return ['square', 'circle'].includes(value);
				}
			},
			color: {
				type: String,
				default: '#277EEF'
			}
		},
		created() {
			this.value = this.check;
		},
		watch: {
			check(val) {
				this.value = val;
			}
		},
		data() {
			return {
				value: ""
			};
		},
		computed: {
			shapeClass() {
				return `he-checkbox--${this.shape}`;
			}
		},
		methods: {
			toggle() {
				this.value = !this.value;
				this.$emit('change', this.value);
			}
		}
	}
</script>

<style lang="scss" scoped>
.he-checkbox {
	border: 1px solid #AAAAAA;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;

	&--square {
		height: 32rpx;
		width: 32rpx;
	}

	&--circle {
		height: 32rpx;
		width: 32rpx;
		border-radius: 50%;
	}

	&--checked {
		border-color: var(--checkbox-color, #277EEF);
		background-color: var(--checkbox-color, #277EEF);
	}
}
</style>

使用示例

<template>
	<view>
		<check-icon :check="isChecked" @change="onChange"></check-icon>
		<check-icon :check="isCheckedCircle" :shape="shape" :color="color" @change="onChange"></check-icon>
	</view>
</template>

<script>
import CheckIcon from './CheckIcon.vue';

export default {
	components: {
		CheckIcon
	},
	data() {
		return {
			isChecked: false,
			isCheckedCircle: false,
			shape: 'circle',
			color: '#FF0000'
		};
	},
	methods: {
		onChange(newVal) {
			console.log("Checkbox state changed to:", newVal);
		}
	}
}
</script>