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

import { ElCheckbox, ElCheckboxButton, ElCheckboxGroup } from 'element-plus'
import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
import { formInputProps } from '../../form-input-props'
import { computed, getCurrentInstance, h } from 'vue'

export default {
  props: formInputProps,
  emits: ['update:modelValue'],
  setup (props, context) {
    const instance = getCurrentInstance()
    const { width, ...formInput } = useFormInput(props, context)
    const { optionProps, options, getOptions, getValue, getModelValue, getOtherValue } = useOptions(props, true, formInput.emitInput)
    instance.ctx.getOptions = getOptions
    const isButton = computed(() => {
      return props.config?.isButton ?? false
    })
    const display = computed(() => {
      return props.config?.display ?? 'inline-block'
    })
    // 另一个键
    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 getCheckboxComponent = (isButton) => {
      return isButton ? ElCheckboxButton : ElCheckbox
    }
    const checkboxItem = (option) => {
      return h(getCheckboxComponent(isButton.value), {
        label: option[optionProps.value.value] ?? option,
        style: { display: display.value }
      }, {
        default: () => `${option[optionProps.value.label] ?? option}`
      })
    }
    const checkboxItems = () => options.value.map(checkboxItem)

    return () => h(ElCheckboxGroup, {
      ...context.attrs,
      ...formInput,
      style: { width: width.value },
      disabled: props.disabled,
      modelValue: proxyValue.value,
      'onUpdate:modelValue': (value) => {
        proxyValue.value = value
      }
    },
    { default: () => checkboxItems() })
  }
}