cip-components/cip-form-input/basic/radio/index.js

import { ElRadioGroup, ElRadio, ElRadioButton } from 'element-plus'
import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed, getCurrentInstance, h } from 'vue'
import './index.less'
export default {
  props: formInputProps,
  emits: ['update:modelValue', 'update:otherValue'],
  setup (props, context) {
    const instance = getCurrentInstance()
    const { width, ...formInput } = useFormInput(props, context)
    const { optionProps, options, getOptions, getValue, getModelValue, getOtherValue } = useOptions(props, false, formInput.emitInput)
    instance.ctx.getOptions = getOptions
    const display = computed(() => {
      return props.config?.display ?? 'inline-block'
    })
    const isButton = computed(() => {
      return props.config?.isButton ?? false
    })
    // 另一个键
    const otherKey = computed(() => {
      return props.config?.otherKey ?? ''
    })

    const proxyValue = computed({
      get () {
        return getValue(props.modelValue)
      },
      set (value) {
        const modelValue = getModelValue(value)
        context.emit('update:modelValue', modelValue)
        if (otherKey.value) {
          const otherValue = getOtherValue(modelValue, value)
          context.emit('update:otherValue', otherValue)
        }
      }
    })
    const getRadioComponent = (isButton) => {
      return isButton ? ElRadioButton : ElRadio
    }
    const radioItem = (option) => {
      return h(getRadioComponent(isButton.value), {
        label: option[optionProps.value.value] ?? option,
        style: { display: display.value },
        disabled: option.disabled
      }, {
        default: () => `${option[optionProps.value.label] ?? option}`
      })
    }

    const radioItems = () => options.value.map(radioItem)

    return () => {
      return h(ElRadioGroup, {
        ...context.attrs,
        ...formInput,
        class: ['cip-basic-radio'],
        style: { width: width.value },
        disabled: props.disabled,
        modelValue: proxyValue.value,
        'onUpdate:modelValue': (value) => {
          proxyValue.value = value
        }
      },
      { default: () => radioItems() })
    }
  }
}