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

概述

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

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

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

  1. 创建组件文件： 创建一个名为 CheckIcon.vue 的文件，并将以下代码复制到文件中。
  2. 引入组件： 在你需要使用该组件的页面中引入并注册它。
示例代码
<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
使用示例
<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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
总结

通过以上步骤，你可以轻松地在 Vue.js 项目中使用这个自定义形状与颜色的复选框组件。这不仅提高了组件的灵活性，还使得界面更加美观和统一。希望这个组件能帮助你在开发过程中更加高效！

注意事项

  • 确保你的项目环境中已经安装了 uni-app 和 vue 的icon相关依赖。
  • 如果需要进一步自定义样式，请直接修改 .he-checkbox 类中的 CSS 规则。
  • 如果需要支持更多形状或颜色，请相应地扩展 props 和样式类。