feat: 日历组件|复选框组件优化
This commit is contained in:
@@ -1,14 +1,18 @@
|
||||
<template>
|
||||
<view class="checkbox-wrapper" @click="onChange">
|
||||
<image class="checkbox-icon" :src="isChecked" mode="aspectFit" />
|
||||
<uni-icons
|
||||
class="checkbox-icon"
|
||||
:type="isChecked"
|
||||
:checked="isChecked"
|
||||
:color="iconColor"
|
||||
size="24"
|
||||
/>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, defineEmits } from "vue";
|
||||
import uncheckedIcon from "./images/unchecked.png";
|
||||
import checkedIcon from "./images/checked.png";
|
||||
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
@@ -21,7 +25,12 @@ const emit = defineEmits(["update:modelValue"]);
|
||||
|
||||
// 计算属性,确定当前是否选中
|
||||
const isChecked = computed(() => {
|
||||
return props.modelValue ? checkedIcon : uncheckedIcon;
|
||||
return props.modelValue ? "checkbox-filled" : "circle";
|
||||
});
|
||||
|
||||
// 计算图标颜色
|
||||
const iconColor = computed(() => {
|
||||
return props.modelValue ? "#1890FF" : "#00A6FF";
|
||||
});
|
||||
|
||||
// 切换选中状态
|
||||
|
||||
Reference in New Issue
Block a user