123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 |
- import { ElRadioGroup, ElRadio, ElRadioButton } from 'element-plus'
- import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
- import { formInputProps, fromInputEmits } from '../../form-input-props'
- import { computed, getCurrentInstance, h } from 'vue'
- import './index.less'
- export default {
- props: formInputProps,
- emits: [...fromInputEmits],
- setup (props, context) {
- const instance = getCurrentInstance()
- const { inputRef, width, updateStream } = useFormInput(props, context)
- const { optionProps, options, getOptions, proxyOptionsValue } = useOptions(props, false, updateStream)
- instance.ctx.getOptions = getOptions
- const display = computed(() => {
- return props.config?.display ?? 'inline-block'
- })
- const isButton = computed(() => {
- return props.config?.isButton ?? false
- })
- 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,
- ref: inputRef,
- class: ['cip-basic-radio'],
- style: { width: width.value },
- disabled: props.disabled,
- modelValue: proxyOptionsValue.value,
- 'onUpdate:modelValue': (value) => {
- proxyOptionsValue.value = value
- }
- },
- { default: () => radioItems() })
- }
- }
- }
|