fix: radio

Lemon-Cai · Apr 14, 2021 · bf678ee · bf678ee
1 parent 4e2314a
commit bf678ee
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 30 deletions.
diff --git a/src/packages/radio/demo.vue b/src/packages/radio/demo.vue
@@ -6,14 +6,18 @@
     </div>
     <h4>组合使用Radio</h4>
     <div class="show-demo">
-      <nut-radio v-model="radioVal1" :label="1">备选项1</nut-radio>
-      <nut-radio v-model="radioVal1" :label="2">备选项2</nut-radio>
+      <nut-radio v-model="radioVal1" :label="1" @change="change"
+        >备选项1</nut-radio
+      >
+      <nut-radio v-model="radioVal1" :label="2" @change="change"
+        >备选项2</nut-radio
+      >
       <span>radioVal1: {{ radioVal1 }} </span>
     </div>
 
     <h4>RadioGroup基本用法</h4>
     <div class="show-demo">
-      <nut-radiogroup v-model="radioGroupVal1">
+      <nut-radiogroup v-model="radioGroupVal1" @change="change">
         <nut-radio label="a">备选项1</nut-radio>
         <nut-radio label="b">备选项2</nut-radio>
       </nut-radiogroup>
@@ -117,8 +121,13 @@ export default createDemo({
       radioGroupVal3: '2',
       radioGroupVal4: 'c'
     });
+
+    const change = (val: string) => {
+      console.log(val);
+    };
     return {
-      ...toRefs(data)
+      ...toRefs(data),
+      change
     };
   }
 });

diff --git a/src/packages/radio/index.vue b/src/packages/radio/index.vue
@@ -1,13 +1,12 @@
 <template>
-  <view :class="classes">
+  <view :class="classes" @click="clickEvt">
     <input
       type="radio"
       :value="currentValue"
       :class="{ 'nut-radio-ani': isAnimated }"
       :checked="currentValue === label"
       :disabled="isDisabled"
       :label="label"
-      @click="clickEvt"
     />
     <view class="nut-radio-label">
       <slot></slot>
@@ -26,7 +25,7 @@ type Iparent = {
 export default create({
   children: [radiogroup],
   props: {
-    value: {
+    modelValue: {
       type: [String, Number, Boolean],
       default: false
     },
@@ -45,7 +44,7 @@ export default create({
     }
   },
 
-  emits: ['update:value', 'change'],
+  emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
     const parentGroup = inject('radiogroup', {
       parentNode: false,
@@ -68,31 +67,30 @@ export default create({
       };
     });
 
-    const currentValue = computed({
-      get: () => {
-        return isParentGroup.value ? parentProps?.value : props.value;
-      },
-      set: (val: any) => {
-        isParentGroup.value ? parentGroup.changeVal(val) : emit('change', val);
-      }
+    const currentValue = computed(() => {
+      return isParentGroup.value ? parentProps?.modelValue : props.modelValue;
     });
 
     const isDisabled = computed(() => {
       return isParentGroup.value ? parentProps?.disabled : props.disabled;
     });
 
     const isAnimated = computed(() => {
-      return isParentGroup ? parentProps?.isAnimated : props.isAnimated;
+      return isParentGroup.value ? parentProps?.isAnimated : props.isAnimated;
     });
 
+    const getValue = () => {
+      return isParentGroup.value
+        ? parentGroup.changeVal(props.label as string)
+        : props.label;
+    };
+
     const clickEvt = (event: Event) => {
-      event.stopPropagation();
       if (isDisabled.value) {
         return false;
       }
-      currentValue.value = props.label ?? '';
-      emit('update:value', currentValue.value);
-      emit('change', currentValue.value);
+      emit('update:modelValue', getValue());
+      !isParentGroup.value && emit('change', getValue());
     };
 
     return {

diff --git a/src/packages/radiogroup/index.vue b/src/packages/radiogroup/index.vue
@@ -4,13 +4,13 @@
   </view>
 </template>
 <script lang="ts">
-import { provide, watch, computed } from 'vue';
+import { provide, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('radiogroup');
 
 export default create({
   props: {
-    value: {
+    modelValue: {
       type: [String, Number, Boolean],
       default: false
     },
@@ -27,25 +27,19 @@ export default create({
       default: true
     }
   },
-  emits: ['change', 'update:value'],
+  emits: ['change', 'update:modelValue'],
   setup(props, { emit }) {
     const classes = computed(() => {
       const prefixCls = componentName;
       return {
         [prefixCls]: true
       };
     });
-    watch(
-      () => props.value,
-      value => {
-        emit('change', value);
-      }
-    );
     provide('radiogroup', {
       parentNode: true,
       changeVal: (val: string | number) => {
         emit('change', val);
-        emit('update:value', val);
+        emit('update:modelValue', val);
       }
     });