mobile.jsx 1.1 KB

12345678910111213141516171819202122232425
  1. import { RadioGroup as VanRadioGroup, Radio as VanRadio, Cell as VanCell } from 'vant'
  2. import { useFormInput, useOptions } from '../../../hooks/form-input'
  3. import { formInputProps, fromInputEmits } from '../../form-input-props'
  4. export default {
  5. props: formInputProps,
  6. emits: [...fromInputEmits],
  7. setup (props, context) {
  8. const { width, updateStream } = useFormInput(props, context)
  9. const { optionProps, options, proxyOptionsValue } = useOptions(props, false, updateStream)
  10. const radioItem = (option) => <VanRadio name={option[optionProps.value.value] ?? option} />
  11. // 优化操作-cell增加点击事件
  12. const cellItem = (option) => <VanCell v-slots={{ 'right-icon': () => radioItem(option) }}
  13. title={option[optionProps.value.label] ?? option}
  14. onclick={() => { proxyOptionsValue.value = option[optionProps.value.value] ?? option }}
  15. clickable />
  16. const radioItems = () => options.value.map(cellItem)
  17. return () => <VanRadioGroup
  18. v-model={proxyOptionsValue.value}
  19. style={{ width: width.value }}>
  20. {radioItems()}
  21. </VanRadioGroup>
  22. }
  23. }