4dkankan-components/packages/components/basic/input/src/checkbox/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:Event) => emit('update:modelValue', (ev.target as HTMLInputElement).checked)"
        />
        <span class="replace">
            <UIIcon :type="props.modelValue ? 'checkbox' : 'nor'" :size="props.width > props.height ? props.height : props.width" />
        </span>
    </div>
    <label class="label" v-if="props.label" :for="id">
        {{ props.label }}
    </label>
</template>

<script setup lang="ts">
import UIIcon from '../../../icon/src/icon.vue'
import { checkboxInputProps } from './checkbox'
import { randomId } from '@kankan/utils'
import { defineProps, defineEmits } from 'vue'
const props = defineProps(checkboxInputProps)
const emit = defineEmits(['update:modelValue'])
const id = randomId(4)
</script>