74 lines
1.5 KiB
Vue
74 lines
1.5 KiB
Vue
<!-- components/checkbox-switch.vue -->
|
||
<template>
|
||
<view class="custom-checkbox" @click="toggle" :class="{ 'custom-checkbox--checked': modelValue }">
|
||
<!-- 这里可以用一个图标，或者用CSS绘制一个方框 -->
|
||
<view class="custom-checkbox__icon">
|
||
<!-- 示例：使用一个简单的对勾符号 -->
|
||
<up-icon v-if="modelValue" name="checkbox-mark" color="#FFF" size="15"></up-icon>
|
||
</view>
|
||
<text class="custom-checkbox__label" v-if="$slots.default">
|
||
<slot></slot>
|
||
</text>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
// 1. 定义并接收 props，将其解构赋值
|
||
const props = defineProps({
|
||
modelValue: {
|
||
type: Boolean,
|
||
required: true
|
||
}
|
||
})
|
||
|
||
// 定义 emits
|
||
const emit = defineEmits(['update:modelValue'])
|
||
|
||
// 2. 在函数中使用 props.modelValue
|
||
const toggle = () => {
|
||
emit('update:modelValue', !props.modelValue)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom-checkbox {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
user-select: none;
|
||
cursor: pointer;
|
||
padding: 8rpx;
|
||
|
||
&__icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
border: 2rpx solid #c8c9cc;
|
||
border-radius: 6rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 10rpx;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
&__icon-text {
|
||
font-size: 24rpx;
|
||
color: #ffffff;
|
||
}
|
||
|
||
&__label {
|
||
font-size: 28rpx;
|
||
color: #606266;
|
||
}
|
||
|
||
// 选中状态的样式
|
||
&--checked &__icon {
|
||
background-color: #2979ff;
|
||
border-color: #2979ff;
|
||
}
|
||
|
||
&--checked &__label {
|
||
color: #2979ff;
|
||
}
|
||
}
|
||
</style>
|