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:
2
components.d.ts
vendored
2
components.d.ts
vendored
@@ -47,6 +47,7 @@ declare module 'vue' {
|
||||
TagsGroup: typeof import('./src/components/TagsGroup/index.vue')['default']
|
||||
TopNavBar: typeof import('./src/components/TopNavBar/index.vue')['default']
|
||||
UseDateRange: typeof import('./src/components/UseDateRange/index.vue')['default']
|
||||
VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||
VanIcon: typeof import('vant/es')['Icon']
|
||||
VanIcons: typeof import('vant/es')['Icons']
|
||||
VanPopup: typeof import('vant/es')['Popup']
|
||||
@@ -94,6 +95,7 @@ declare global {
|
||||
const TagsGroup: typeof import('./src/components/TagsGroup/index.vue')['default']
|
||||
const TopNavBar: typeof import('./src/components/TopNavBar/index.vue')['default']
|
||||
const UseDateRange: typeof import('./src/components/UseDateRange/index.vue')['default']
|
||||
const VanCheckbox: typeof import('vant/es')['Checkbox']
|
||||
const VanIcon: typeof import('vant/es')['Icon']
|
||||
const VanIcons: typeof import('vant/es')['Icons']
|
||||
const VanPopup: typeof import('vant/es')['Popup']
|
||||
|
||||
@@ -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>
|
||||
@@ -1,12 +0,0 @@
|
||||
## 复选框组件
|
||||
|
||||
## 提示词:
|
||||
|
||||
使用 uniapp + vue3 组合式 api 开发微信小程序,要求如下:
|
||||
1、按照提供的图片高度还原交互设计
|
||||
2、要求布局样式结构简洁明了,class 命名请按照模块名称来命名,例如:.checkbox-wrapper
|
||||
3、可以使用 uniapp 内置的组件
|
||||
|
||||
## 备注
|
||||
|
||||
仅供学习、交流使用,请勿用于商业用途。
|
||||
@@ -1,10 +0,0 @@
|
||||
.checkbox-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.checkbox-icon {
|
||||
margin-right: 6px;
|
||||
color: #0ccd58;
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
// 是否需要微信手机号授权登录
|
||||
|
||||
Reference in New Issue
Block a user