35 lines
793 B
Vue
35 lines
793 B
Vue
<template>
|
|
<view class="checkbox-wrapper" @click="onChange">
|
|
<image class="checkbox-icon" :src="isChecked" mode="aspectFit" />
|
|
<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: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
// 计算属性，确定当前是否选中
|
|
const isChecked = computed(() => {
|
|
return props.modelValue ? checkedIcon : uncheckedIcon;
|
|
});
|
|
|
|
// 切换选中状态
|
|
const onChange = () => {
|
|
emit("update:modelValue", !props.modelValue);
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style> |