magiccube-vue3/package/components/checkbox/index.js

vue3-js版组件库

import { computed, inject, getCurrentInstance } from 'vue'
import getFormValidMethod from '../../utils/form-valid'
const Checkbox = {
    name: 'McCheckbox',
    props: {
        modelValue: Boolean,
        label: [String, Number],
        name: String,
        size: String,
        disabled: Boolean,
        include: Boolean,
        distance: {
            type: [Number, String],
            default: 16
        }
    },
    emits: ['update:modelValue', 'change'],
    setup(props, { emit, slots }) {
        const groupModel = inject('groupModel', null)
        const groupChange = inject('groupChange', () => { })
        const isCheckboxGroup = inject('isCheckboxGroup', null)

        const instance = getCurrentInstance()
        const { validator } = getFormValidMethod(instance)

        const model = computed({
            get() {
                return isCheckboxGroup?.value? groupModel.value.includes(props.label) : props.modelValue
            },
            set(value) {
                emit('update:modelValue', value)
                emit('change', value)
                validator && validator('change', value)
            }
        })

        const handleChange = (event) => {
            if (isCheckboxGroup?.value) {
                groupChange(event.target.checked, props.label)
                emit('change', {checked: event.target.checked, label: props.label, name: props.name})
            } else {
                model.value = !model.value
            }
        }

        return () => (
            <div class={{
                'mc-checkbox': true,
                disabled: props.disabled,
                [props.size]: Boolean(props.size)
            }}
            style={{ 'margin-right': groupModel?.value ? props.distance + 'px' : 0 }}>
                <div class={{
                    'mc-checkbox__wrap': true,
                    'active': model.value,
                    'include': props.include
                }}>
                    <input class="mc-checkbox__inner"
                        type="checkbox"
                        checked={model.value}
                        disabled={props.disabled}
                        onChange={handleChange}></input>
                    <span class={{
                        'mc-checkbox__label': true,
                        'margin-left': slots.default,
                        'active': model.value
                    }}>
                        <slot></slot>
                        {slots.default ? slots.default() : ''}
                    </span>
                </div>
            </div>
        )
    }
}

Checkbox.install = (app) => {
    app.component(Checkbox.name, Checkbox)
}

const McCheckbox = Checkbox

export { McCheckbox, McCheckbox as default }