44 lines
884 B
Vue
44 lines
884 B
Vue
<template>
|
|
<view class="checkbox-wrapper" @click.stop="onChange">
|
|
<uni-icons
|
|
class="checkbox-icon"
|
|
:type="isChecked"
|
|
:checked="isChecked"
|
|
:color="iconColor"
|
|
size="24"
|
|
/>
|
|
<slot></slot>
|
|
</view>
|
|
</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 iconColor = computed(() => {
|
|
return props.modelValue ? "#1890FF" : "#00A6FF";
|
|
});
|
|
|
|
// 切换选中状态
|
|
const onChange = () => {
|
|
emit("update:modelValue", !props.modelValue);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style> |