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

vue3-js版组件库

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

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

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

        const handleChange = (value) => {
            model.value = value
        }

        provide('radioGroupChange', handleChange)
        provide('radioGroupModel', model)
        provide('isRadioGroup', isGroup)

        return () => (
            <div class="mc-radio-group">
                {slots.default ? slots.default() : ''}
            </div>
        )
    }
}

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

const McRadioGroup = RadioGroup

export { McRadioGroup, McRadioGroup as default }