qjkankan_shibadongcun/packages/qjkankan-components/src/components/input/checkbox.vue

<template>
    <div class="input checkbox" :style="{ width, height }" :class="{ disabled }">
        <input :disabled="disabled" :id="id" type="checkbox" class="replace-input" :checked="props.modelValue" @input="ev => emit('update:modelValue', ev.target.checked)" />
        <span class="replace">
            <icon :type="props.modelValue ? 'checkbox' : 'nor'" :size="width > height ? height : width" />
        </span>
    </div>
    <label class="label" v-if="props.label" :for="id">
        {{ props.label }}
    </label>
</template>

<script setup>
import icon from '../icon'
import { checkboxPropsDesc } from './state'
import { randomId } from '../../utils'
import { defineProps, defineEmits } from 'vue'
const props = defineProps(checkboxPropsDesc)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)
</script>