cip-components/cip-form-input/special-view/color-status/view.jsx

import { formInputViewProps, fromInputEmits } from '../../form-input-props'
import { useFormView, useOptions } from '../../../hooks/form-input'
import { computed } from 'vue'
import { isObject } from '@cip/utils/util'
import './view.less'
export default {
  props: formInputViewProps,
  emits: fromInputEmits,
  setup (props) {
    const { securityConfig } = useFormView(props)
    const { getValue, options, optionProps } = useOptions(props, false)
    const viewOption = computed(() => {
      const value = getValue(props.modelValue)
      const currentOption = options.value.find(option => option[optionProps.value.value] === value) // || props.modelValue
      if (isObject(currentOption)) { // 防御性代码
        return {
          label: currentOption[optionProps.value.label],
          color: currentOption[optionProps.value.color ?? 'color']
        }
      }
      return { label: currentOption }
    })
    return () => <div class={'cip-color-status'} >
      {
        viewOption.value.color && <div class={'cip-color-status__color'} style={{
          width: securityConfig.value.dotSize,
          height: securityConfig.value.dotSize,
          background: viewOption.value.color
        }}/>
      }
      <div>{viewOption.value.label}</div>
    </div>
  }
}