UniApp组件开发七日通-复选框(check)

首先看模板部分，组件使用了一个view标签作为容器，绑定了check和check-on的类，点击事件触发click方法。内部包含一个h-icon组件和一个slot，用于显示选中图标和自定义内容。

<view class="check" :class="{'check-on':state.checked}" @click="click">
		<h-icon name="success"></h-icon>
		<slot></slot>
	</view>

然后是脚本部分，使用了Vue 3的组合式API，定义了props为可选的checked布尔值，state响应式对象同步prop的checked状态。emit定义了change事件，点击时切换checked状态并触发事件。watchEffect监听prop的checked变化，同步到state，确保父组件控制时的响应性。

import { computed, reactive, watchEffect } from 'vue';
	type iProp={
		checked?:boolean
	}
	const prop = defineProps<iProp>()
    // data
	const state=reactive({
		checked:prop.checked
	})
	const emit=defineEmits<{
		change:[value:boolean]
	}>()
	
	const click=()=>{
		state.checked=!state.checked
		emit('change',state.checked)
	}
	watchEffect(()=>{
		state.checked=prop.checked
	})

样式部分使用scss，定义了check类的基本样式，包括尺寸、边框、背景等，check-on类用于选中状态，修改颜色和背景。

.check {
		display:inline-flex;
		gap:5px;
		align-items: center;
		justify-content: center;
		width: 16px;
		height: 16px;
		font-size: 12px;
		color:transparent;
		background: #fff;
		border:solid 1px #ddd;
		border-radius: 3px;
		box-sizing: border-box;
		cursor: pointer;
		vertical-align: middle;
		&:hover{
			border-color: #1989fa;
		}
		&-on{
			color: #fff;
			background: #1989fa;
			border-color: #1989fa;
		}
	}

h-check 复选框组件文档

组件描述

h-check 是一个用于多选操作的复选框组件，支持自定义显示内容，通过选中状态切换样式，并提供事件通知选中状态变化。

组件结构

<template>
  <view class="check" :class="{'check-on':state.checked}" @click="click">
    <h-icon name="success"></h-icon>
    <slot></slot>
  </view>
</template>

• 外层容器使用view标签，通过check和check-on类控制选中样式。
• 内置h-icon组件显示选中图标（名称为"success"）。
• 提供slot用于自定义复选框右侧的文本或其他内容。

Props

属性名	类型	默认值	说明
checked	Boolean	-	可选，初始选中状态

事件

事件名	参数类型	说明
change	Boolean	选中状态变化时触发，参数为当前选中状态

状态同步

组件内部通过watchEffect监听checked prop的变化，自动同步到内部状态state.checked，确保父组件通过prop控制时的响应性。

样式说明

• 基础样式（.check）：16x16px的方形框，白色背景，灰色边框（#ddd），未选中时图标颜色透明。
• 选中样式（.check-on）：蓝色背景（#1989fa），蓝色边框，图标颜色白色。
• 悬停样式（:hover）：边框颜色变为蓝色（#1989fa）。

使用示例

<!-- 基础使用 -->
<h-check @change="handleChange">选择项</h-check>

<!-- 初始选中 -->
<h-check :checked="true">已选中项</h-check>

// 事件处理
const handleChange = (value) => {
  console.log('选中状态变化：', value);
};

h-check 复选框组件文档

组件概述

h-check 是一个基于 Vue 3 开发的复选框组件，主要用于在一组备选项中实现多选功能。支持通过 checked prop 控制初始选中状态，并在状态变化时触发 change 事件通知父组件。

---

组件结构解析

模板部分

<template>
  <view class="check" :class="{'check-on':state.checked}" @click="click">
    <h-icon name="success"></h-icon>
    <slot></slot>
  </view>
</template>

• 外层容器使用 view 标签，类名 check 定义基础样式，:class="{'check-on':state.checked}" 根据选中状态动态添加 check-on 类（选中样式）。
• 内置 h-icon 组件（名称为 success）用于显示选中图标。
• <slot> 用于插入自定义内容（如复选框右侧的文本描述）。

---

脚本逻辑说明

Props

属性名	类型	必填	默认值	说明
checked	Boolean	否	-	初始选中状态（双向绑定）

状态与事件

<script lang="ts" setup>
import { computed, reactive, watchEffect } from 'vue';

type iProp = { checked?: boolean };
const prop = defineProps<iProp>();
const state = reactive({ checked: prop.checked }); // 内部响应式状态
const emit = defineEmits<{ change: [value: boolean] }>(); // 定义 change 事件

const click = () => {
  state.checked = !state.checked; // 点击切换选中状态
  emit('change', state.checked); // 触发事件通知父组件
};

watchEffect(() => {
  state.checked = prop.checked; // 监听 prop 变化，同步内部状态
});
</script>

• 内部状态同步：通过 reactive 创建 state.checked 响应式对象，初始值由 prop.checked 传入。
• 点击事件：click 方法切换 state.checked 状态，并通过 emit 触发 change 事件传递新状态。
• 外部控制：watchEffect 监听 prop.checked 变化，自动同步到内部状态，支持父组件通过 v-model 或直接修改 checked prop 控制组件。

---

样式细节

<style lang="scss" scoped>
.check {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 12px;
  color: transparent; // 未选中时图标透明
  background: #fff;
  border: solid 1px #ddd;
  border-radius: 3px;
  box-sizing: border-box;
  cursor: pointer;
  vertical-align: middle;

  &:hover {
    border-color: #1989fa; // 悬停时边框变蓝
  }

  &-on {
    color: #fff; // 选中时图标白色
    background: #1989fa; // 选中时背景蓝色
    border-color: #1989fa; // 选中时边框蓝色
  }
}
</style>

• 基础样式：16x16px 的方形复选框，白色背景，灰色边框（#ddd），未选中时图标透明不可见。
• 悬停交互：鼠标悬停时边框颜色变为蓝色（#1989fa），提升交互反馈。
• 选中样式：选中时背景和边框变为蓝色（#1989fa），图标颜色变为白色，视觉上明确区分选中状态。

---

使用示例

基础用法（默认未选中）

<template>
  <h-check @change="handleCheckChange">同意用户协议</h-check>
</template>

<script setup>
const handleCheckChange = (checked) => {
  console.log('复选框状态变化：', checked); // 输出：true 或 false
};
</script>

初始选中状态

<template>
  <h-check :checked="true">记住登录状态</h-check>
</template>

父组件控制状态（双向绑定）

<template>
  <h-check :checked="isChecked" @change="isChecked = $event">自动续费</h-check>
</template>

<script setup>
import { ref } from 'vue';
const isChecked = ref(false);
</script>