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

vue3-js版组件库

import { computed, provide, ref, getCurrentInstance } from 'vue'
import getFormValidMethod from '../../utils/form-valid'
const CheckboxGroup = {
    name: 'McCheckboxGroup',
    props: {
        modelValue: [Array, String, Number],
        selectAll: Boolean
    },
    emits: ['update:modelValue', 'change'],
    setup(props, { emit, slots }) {

        const isGroup = ref('true')
        const instance = getCurrentInstance()
        const { validator } = getFormValidMethod(instance)

        const model = computed({
            get() {
                if(Array.isArray(props.modelValue)) {
                    return props.modelValue || []
                } else if(typeof props.modelValue === 'string'){
                    const str = props.modelValue.toString()
                    return str.split(',')
                } else if(typeof props.modelValue === 'number'){
                    return [props.modelValue]
                } else {
                    return []
                }
            },
            set(value) {
                validator && validator('change', value)
                emit('update:modelValue', value)
                emit('change', value)
            }
        })

        const handleChange = (status, label) => {
            const _arr = model.value
            if (status) {
                _arr.push(label)
            } else {
                const idx = _arr.findIndex(lab => lab === label)
                _arr.splice(idx, 1)
            }
            model.value = _arr
        }

        provide('groupModel', model)
        provide('groupChange', handleChange)
        provide('isCheckboxGroup', isGroup)

        return () => (
            <div>
                {slots.default ? slots.default() : ''}
            </div>
        )
    }
}

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

const McCheckboxGroup = CheckboxGroup

export { McCheckboxGroup, McCheckboxGroup as default }