feat(radio): add v-model support

Author: b2nil

src/components/radio/index.ts

@@ -1,44 +1,48 @@
-import { h, defineComponent, computed, mergeProps } from 'vue'
+import { h, defineComponent, computed, mergeProps, PropType } from 'vue'
 import { Text, View } from '@tarojs/components'
 import { CommonEvent } from '@tarojs/components/types/common'
 import { AtRadioProps, RadioOption } from 'types/radio'
+import { useModelValue } from '../../composables/model'
 
 const AtRadio = defineComponent({
   name: "AtRadio",
 
   props: {
     value: {
-      type: String as () => AtRadioProps<any>['value'],
+      type: String as PropType<AtRadioProps<any>['value']>,
       default: '',
       required: true
     },
     options: {
-      type: Array as () => AtRadioProps<any>['options'],
+      type: Array as PropType<AtRadioProps<any>['options']>,
       default: [],
       required: true
     },
-    onClick: {
-      type: Function as unknown as () => AtRadioProps<any>['onClick'],
-      default: () => (vaule: any, event: CommonEvent) => { },
-      required: true
-    },
+    onClick: Function as PropType<AtRadioProps<any>['onClick']>
   },
 
-  setup(props: AtRadioProps<any>, { attrs, slots }) {
+  setup(props: AtRadioProps<any>, { attrs, emit }) {
 
-    const genOptionClass = computed(() => (option) => ({
+    const radioModelValue = useModelValue(props, emit, 'value')
+
+    const genOptionClasses = computed(() => (option) => ({
       'at-radio__option': true,
       'at-radio__option--disabled': option.disabled
     }))
 
-    const genIconClass = computed(() => (option) => ({
+    const genIconClasses = computed(() => (option) => ({
       'at-radio__icon': true,
       'at-radio__icon--checked': props.value === option.value
     }))
 
     function handleClick(option: RadioOption<any>, event: CommonEvent): void {
       if (option.disabled) return
-      props.onClick(option.value, event)
+
+      if (attrs['onUpdate:value']) {
+        radioModelValue.value = option.value
+      } else {
+        props.onClick?.(option.value, event)
+      }
     }
 
     return () => (
@@ -48,7 +52,7 @@ const AtRadio = defineComponent({
         default: () => props.options.map(option => (
           h(View, {
             key: option.value,
-            class: genOptionClass.value(option),
+            class: genOptionClasses.value(option),
             onTap: handleClick.bind(this, option)
           }, {
             default: () => [
@@ -67,7 +71,7 @@ const AtRadio = defineComponent({
 
                       // icon
                       h(View, {
-                        class: genIconClass.value(option)
+                        class: genIconClasses.value(option)
                       }, {
                         default: () => [
                           h(Text, { class: 'at-icon at-icon-check' })

src/pages/form/radio/index.ts

@@ -0,0 +1,130 @@
+<template>
+  <page header-title="Radio 单选框">
+    <panel
+      title="基础用法"
+      no-padding
+    >
+      <view class="radio-container">
+        <at-radio
+          :options="radioOptions1"
+          :value="radioValue1"
+          @click="handleRadioChange"
+        />
+      </view>
+    </panel>
+
+    <panel
+      title="含有单项描述"
+      no-padding
+    >
+      <view class="radio-container">
+        <at-radio
+          :options="radioOptions2"
+          :value="radioValue2"
+          @click="handleRadioChange2nd"
+        />
+      </view>
+    </panel>
+
+    <panel
+      title="使用 v-model: v-model:value"
+      no-padding
+    >
+      <view class="radio-container">
+        <at-radio
+          :options="radioOptions2"
+          v-model:value="radioValue2"
+        />
+      </view>
+    </panel>
+
+    <panel
+      title="单项禁用"
+      no-padding
+    >
+      <view class="radio-container">
+        <at-radio
+          :options="radioOptions3"
+          :value="radioValue3"
+          @click="handleRadioChange3rd"
+        />
+      </view>
+    </panel>
+  </page>
+
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from 'vue'
+import { AtRadio } from '../../../index'
+import { RadioOption } from 'types/radio'
+import { Page, Panel } from '../../components/demo-page'
+import './index.scss'
+
+interface IndexState {
+  radioValue1: string
+  radioValue2: string
+  radioValue3: string
+  radioOptions1: RadioOption<string>[]
+  radioOptions2: RadioOption<string>[]
+  radioOptions3: RadioOption<string>[]
+}
+
+export default defineComponent({
+
+  name: "RadioDemo",
+
+  components: {
+    AtRadio,
+    Page,
+    Panel
+  },
+
+  setup() {
+
+    const state = reactive<IndexState>({
+      radioValue1: 'option1',
+      radioValue2: 'option1',
+      radioValue3: 'option3',
+      radioOptions1: [
+        { label: '单选项一', value: 'option1' },
+        { label: '单选项二', value: 'option2' },
+        { label: '单选项三', value: 'option3' }
+      ],
+      radioOptions2: [
+        { label: '单选项一', value: 'option1', desc: '单选项描述一' },
+        { label: '单选项二', value: 'option2', desc: '单选项描述二' },
+        { label: '单选项三', value: 'option3', desc: '单选项描述三' }
+      ],
+      radioOptions3: [
+        { label: '单选项一', value: 'option1', desc: '单选项描述' },
+        { label: '单选项二', value: 'option2' },
+        {
+          label: '单选项三禁用',
+          value: 'option3',
+          desc: '单选项描述',
+          disabled: true
+        }
+      ]
+    })
+
+    function handleRadioChange(value: string): void {
+      state.radioValue1 = value
+    }
+    function handleRadioChange2nd(value: string): void {
+      state.radioValue2 = value
+    }
+    function handleRadioChange3rd(value: string): void {
+      state.radioValue3 = value
+    }
+
+    return {
+      ...toRefs(state),
+      handleRadioChange,
+      handleRadioChange2nd,
+      handleRadioChange3rd
+    }
+  }
+})
+
+</script>

src/pages/form/radio/index.vue

@@ -1,5 +1,5 @@
 
-import { CommonEvent } from "@tarojs/components/types/common";
+import { CommonEvent } from "@tarojs/components/types/common"
 
 import AtComponent from './base'
 
@@ -25,16 +25,16 @@ export interface RadioOption<T> {
 
 export interface AtRadioProps<T> extends AtComponent {
   /**
-   * 输入框当前值，用户需要通过 onClick 事件来更新 value 值，必填
+   * 输入框当前值，支持 v-model，用户可通过 v-model:value 或 onClick 事件来更新 value 值，必填
    */
   value: T
   /**
    * 选项列表
    */
   options: Array<RadioOption<T>>
   /**
-   * 点击选项触发事件,开发者需要通过此事件来更新 value，onClick 函数必填
+   * 点击选项触发事件,开发者可通过此事件来更新 value
    */
-  onClick: (vaule: T, event: CommonEvent) => void
+  onClick?: (vaule: T, event: CommonEvent) => void
 }