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

vue3-js版组件库

import getFormValidMethod from '../../utils/form-valid'
import { ref, computed, inject, getCurrentInstance } from 'vue'
const Radio = {
    name: 'McRadio',
    props: {
        modelValue: Boolean,
        label: [String, Number],
        name: String,
        disabled: Boolean,
        distance: {
            type: Number,
            default: 16
        }
    },
    emits: ['update:modelValue', 'change'],
    setup(props, { emit, slots }) {

        const groupName = ref('')

        const radioGroupChange = inject('radioGroupChange', () => { })

        const radioGroupModel = inject('radioGroupModel', null)

        const isRadioGroup = inject('isRadioGroup', null)

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

        if (props.name) groupName.value = props.name || 'mc_radio_' + Date.now()

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

        const handleChange = () => {
            if (isRadioGroup?.value === 'true' && radioGroupChange) {
                radioGroupChange(props.label)
            } else {
                model.value = !model.value
            }
        }

        return () => (
            <div class={{
                'mc-radio': true,
                disabled: props.disabled
            }} style={{
                'margin-right': isRadioGroup?.value === 'true' ? props.distance + 'px' : 0
            }}>
                <div class={{
                    'mc-radio__wrap': true,
                    active: model.value
                }}>
                    <input class="mc-radio__inner" type="radio"
                        name={props.name || groupName.value}
                        checked={model.value}
                        disabled={props.disabled}
                        onclick={handleChange}></input>
                    <span class={{
                        'mc-radio__label': true,
                        'margin-left': slots.default,
                        active: model.value
                    }}>
                        {slots.default ? slots.default() : ''}
                    </span>
                </div>
            </div>
        )
    }
}

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

const McRadio = Radio

export { McRadio, McRadio as default }