refactor: swap custom CheckBox for Vant Checkbox

delete unused custom CheckBox component files including .vue, style and doc files
update login page template and imports to use van-checkbox
add VanCheckbox type definitions to global components declarations
This commit is contained in:
DEV_DSW
2026-05-27 13:46:42 +08:00
parent 3ab5c596cf
commit b1731ed919
5 changed files with 5 additions and 65 deletions

View File

@@ -1,39 +0,0 @@
<template>
<div class="checkbox-wrapper" @click.stop="onChange">
<uni-icons
class="checkbox-icon"
:type="isChecked"
:checked="isChecked"
size="24"
color="opacity"
/>
<slot></slot>
</div>
</template>
<script setup>
import { computed, defineEmits } from "vue";
const props = defineProps({
modelValue: {
type: Boolean,
default: false,
},
});
const emit = defineEmits(["update:modelValue"]);
// 计算属性,确定当前是否选中
const isChecked = computed(() => {
return props.modelValue ? "checkbox-filled" : "circle";
});
// 切换选中状态
const onChange = () => {
emit("update:modelValue", !props.modelValue);
};
</script>
<style scoped lang="scss">
@import "./styles/index.scss";
</style>

View File

@@ -1,12 +0,0 @@
## 复选框组件
## 提示词:
使用 uniapp + vue3 组合式 api 开发微信小程序,要求如下:
1、按照提供的图片高度还原交互设计
2、要求布局样式结构简洁明了class 命名请按照模块名称来命名,例如:.checkbox-wrapper
3、可以使用 uniapp 内置的组件
## 备注
仅供学习、交流使用,请勿用于商业用途。

View File

@@ -1,10 +0,0 @@
.checkbox-wrapper {
display: flex;
align-items: center;
flex-wrap: wrap;
.checkbox-icon {
margin-right: 6px;
color: #0ccd58;
}
}

View File

@@ -4,14 +4,14 @@
<img class="w-[200px] h-[200px]" :src="logo" />
<!-- 协议勾选 -->
<div class="w-[304px] mt-[80px] flex items-center">
<CheckBox v-model="isAgree">
<div class="w-[304px] mt-[80px]">
<van-checkbox v-model="isAgree">
<span class="text-[12px] text-ink-600">我已阅读并同意</span>
<span class="text-[12px] text-[#2D91FF] mx-[4px]" @click.stop="handleAgreeClick('service')">服务协议</span>
<span class="text-[12px] text-ink-600"></span>
<span class="text-[12px] text-[#2D91FF] mx-[4px]" @click.stop="handleAgreeClick('privacy')">隐私协议</span>
<span class="text-[12px] text-ink-600 ml-[30px]">授权与账号关联操作</span>
</CheckBox>
</van-checkbox>
</div>
<!-- 按钮区域 -->
@@ -29,7 +29,6 @@
import { ref, computed } from "vue";
import { getServiceAgreement, getPrivacyAgreement } from "@/api/login";
import { onLogin, goBack, onCheckPhoneLogin, onAppleLogin } from "@/hooks/useGoLogin";
import CheckBox from "@/components/CheckBox/index.vue";
import AgreePopup from "./components/AgreePopup/index.vue";
// 是否需要微信手机号授权登录