refactor: radio

src/packages/backtop/demo.vue

@@ -24,17 +24,12 @@
     <div class="text-data">我是测试数据22</div>
     <div class="text-data">我是测试数据23</div>
     <div class="text-data">我是测试数据24</div>
-    <nut-backtop
-      @click="handleClick"
-      :el-id="elId"
-      :distance="100"
-      :bottom="90"
-    >
+    <nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="90">
       <view>无</view>
     </nut-backtop>
     <nut-backtop
       @click="handleClick"
-      :el-id="elId"
+      el-id="elId"
       :distance="200"
     ></nut-backtop>
   </div>

src/packages/backtop/doc.md

@@ -21,7 +21,7 @@ app.use(BackTop);
 ### 基本用法
 
 ```html
-<nut-backtop  :el-id="elId" ></nut-backtop>
+<nut-backtop  el-id="elId" ></nut-backtop>
 ```
 
 ### 设置出现位置
@@ -33,7 +33,7 @@ app.use(BackTop);
 ### 自定义样式
 
 ```html
-<nut-backtop @click="handleClick" :el-id="elId" :distance="100" :bottom="90" ><div>无</div></nut-backtop>
+<nut-backtop @click="handleClick" el-id="elId" :distance="100" :bottom="90" ><div>无</div></nut-backtop>
 ```
 
 ### click事件

src/packages/radio/demo.vue

@@ -2,12 +2,12 @@
   <div class="demo-list">
     <h4>Radio基本用法</h4>
     <div class="show-demo">
-      <nut-radio v-model="radioVal" :label="2">备选项</nut-radio>
+      <nut-radio v-model:value="radioVal" :label="2">备选项</nut-radio>
     </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:value="radioVal1" :label="1">备选项1</nut-radio>
+      <nut-radio v-model:value="radioVal1" :label="2">备选项2</nut-radio>
       <span>radioVal1: {{ radioVal1 }} </span>
     </div>
 
@@ -15,23 +15,24 @@
 
     <h4>RadioGroup基本用法</h4>
     <div class="show-demo">
-      <nut-radiogroup v-model="radioGroupVal1">
+      <nut-radiogroup v-model:value="radioGroupVal1">
         <nut-radio label="a">备选项1</nut-radio>
         <nut-radio label="b">备选项2</nut-radio>
       </nut-radiogroup>
+      <span>radioGroupVal1: {{ radioGroupVal1 }} </span>
     </div>
 
     <h4>Radio禁用</h4>
     <div class="show-demo">
       <div>
-        <span>未选中时的禁用状态：</span
-        ><nut-radio :disabled="true" v-model="radioVal2" label="禁用"
+        <span>未选中时的禁用状态：</span>
+        <nut-radio :disabled="true" v-model:value="radioVal2" label="禁用"
           >备选项1</nut-radio
         >
       </div>
       <div>
-        <span>已选中时的禁用状态：</span
-        ><nut-radio :disabled="true" v-model="radioVal2" label="选中且禁用"
+        <span>已选中时的禁用状态：</span>
+        <nut-radio :disabled="true" v-model:value="radioVal2" label="选中且禁用"
           >备选项2</nut-radio
         >
       </div>
@@ -39,7 +40,7 @@
 
     <h4>RadioGroup整体禁用</h4>
     <div class="show-demo">
-      <nut-radiogroup v-model="radioGroupVal2" :disabled="true">
+      <nut-radiogroup v-model:value="radioGroupVal2" :disabled="true">
         <nut-radio label="1">备选项1</nut-radio>
         <nut-radio label="2">备选项2</nut-radio>
         <nut-radio label="3">备选项3</nut-radio>
@@ -56,7 +57,7 @@
 
     <h4>RadioGroup整体定义尺寸</h4>
     <div class="show-demo">
-      <nut-radiogroup v-model="radioGroupVal3" size="large">
+      <nut-radiogroup v-model:value="radioGroupVal3" size="large">
         <nut-radio label="1">备选项1</nut-radio>
         <nut-radio label="2">备选项2</nut-radio>
         <nut-radio label="3">备选项3</nut-radio>
@@ -65,10 +66,10 @@
 
     <h4>Radio禁用动效</h4>
     <div class="show-demo">
-      <nut-radio :animated="false" v-model="radioVal3" label="a"
+      <nut-radio :animated="false" v-model:value="radioVal3" label="a"
         >备选项1</nut-radio
       >
-      <nut-radio :animated="false" v-model="radioVal3" label="b"
+      <nut-radio :animated="false" v-model:value="radioVal3" label="b"
         >备选项2</nut-radio
       >
       <p>animated 属性值为 false 时，禁用自带动效</p>
@@ -76,7 +77,7 @@
 
     <h4>RadioGroup禁用动效</h4>
     <div class="show-demo">
-      <nut-radiogroup v-model="radioGroupVal4" :animated="false">
+      <nut-radiogroup v-model:value="radioGroupVal4" :animated="false">
         <nut-radio label="a">备选项1</nut-radio>
         <nut-radio label="b">备选项2</nut-radio>
         <nut-radio label="c">备选项3</nut-radio>
@@ -86,12 +87,12 @@
     <h4>自定义Class</h4>
     <div class="show-demo">
       <div>
-        <nut-radio class="my-radio" v-model="radioVal5" label="a"
+        <nut-radio class="my-radio" v-model:value="radioVal5" label="a"
           >备选项1</nut-radio
         >
       </div>
       <div>
-        <nut-radio class="my-radio" v-model="radioVal5" label="b"
+        <nut-radio class="my-radio" v-model:value="radioVal5" label="b"
           >备选项2</nut-radio
         >
       </div>

src/packages/radio/doc.md

@@ -4,7 +4,7 @@
 
 通过 **v-model** 绑定值当前选中项的 **label** ，二者一致时 **Radio** 选中。
 ```html
-<nut-radio v-model="radioVal" :label="b">备选项1</nut-radio>
+<nut-radio v-model:value="radioVal" :label="b">备选项1</nut-radio>
 ```
 ```javascript
 setup() {
@@ -17,8 +17,8 @@ setup() {
 ## 组合使用 Radio
 
 ```html
-<nut-radio v-model="radioVal" :label="1">备选项1</nut-radio>
-<nut-radio v-model="radioVal" :label="2">备选项2</nut-radio>
+<nut-radio v-model:value="radioVal" :label="1">备选项1</nut-radio>
+<nut-radio v-model:value="radioVal" :label="2">备选项2</nut-radio>
 ```
 ```javascript
 setup() {
@@ -31,7 +31,7 @@ setup() {
 ## RadioGroup基本用法
 
 ```html
-<nut-radiogroup v-model="radioGroupVal">
+<nut-radiogroup v-model:value="radioGroupVal">
   <nut-radio label="a">备选项1</nut-radio>
   <nut-radio label="b">备选项2</nut-radio>
 </nut-radiogroup>
@@ -56,7 +56,7 @@ setup() {
 ## RadioGroup 整体禁用
 
 ```html
-<nut-radiogroup v-model="radioGroupVal" :animated="false">
+<nut-radiogroup v-model:value="radioGroupVal" :animated="false">
   <nut-radio label="a">备选项1</nut-radio>
   <nut-radio label="b">备选项2</nut-radio>
   <nut-radio label="c">备选项3</nut-radio>
@@ -85,7 +85,7 @@ setup() {
 内置 **small**，**base**，**large** 三种规格供使用。
 
 ```html
-<nut-radiogroup v-model="radioGroupVal" size="large">
+<nut-radiogroup v-model:value="radioGroupVal" size="large">
   <nut-radio label="1">备选项1</nut-radio>
   <nut-radio label="2">备选项2</nut-radio>
   <nut-radio label="3">备选项3</nut-radio>
@@ -104,8 +104,8 @@ setup() {
 通过给 **animated** 传布尔值 **false** ，禁用自带动效
 
 ```html
-<nut-radio :animated="false" v-model="radioVal" label="a">备选项1</nut-radio>
-<nut-radio :animated="false" v-model="radioVal" label="b">备选项2</nut-radio>
+<nut-radio :animated="false" v-model:value="radioVal" label="a">备选项1</nut-radio>
+<nut-radio :animated="false" v-model:value="radioVal" label="b">备选项2</nut-radio>
 ```
 ```javascript
 setup() {
@@ -118,7 +118,7 @@ setup() {
 ## RadioGroup 禁用动效
 
 ```html
-<nut-radiogroup v-model="radioGroupVal" :animated="false">
+<nut-radiogroup v-model:value="radioGroupVal" :animated="false">
   <nut-radio label="a">备选项1</nut-radio>
   <nut-radio label="b">备选项2</nut-radio>
   <nut-radio label="c">备选项3</nut-radio>
@@ -145,7 +145,7 @@ setup() {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| v-model | 当前选中项的标识符，与label值一致时呈选中状态 | 任意类型 | -
+| v-model:value | 当前选中项的标识符，与label值一致时呈选中状态 | 任意类型 | -
 | label | 标识符，与v-model值一致时呈选中状态 | 任意类型 | -
 | size | 尺寸，可选值small/base/large | String | base
 | disabled | 是否禁用 | Boolean | false
@@ -155,13 +155,13 @@ setup() {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| v-model | 当前选中项的标识符，与label值一致时呈选中状态 | 任意类型 | -
-| size | 尺寸，可选值small/base/large | String | base
-| disabled | 是否禁用 | Boolean | false
-| animated | 是否需要动效 | Boolean | true
+| v-model:value | 当前选中项的标识符，与label值一致时呈选中状态 | String、Number、Boolean | -
+| size | 尺寸，可选值small/base/large | String | `base`
+| disabled | 是否禁用 | Boolean | `false`
+| animated | 是否需要动效 | Boolean | `true`
 
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| change | 值变化时触发 | 当前选中项值（label）【设置label后有值、默认为空】,event
+| change | 值变化时触发 | 当前选中项值（label）【设置label后有值、默认为空】

src/packages/radio/index.scss

@@ -15,10 +15,10 @@
     vertical-align: middle;
     margin-top: 0px;
     &::after {
+      content: '';
       position: absolute;
       left: 50%;
       top: 50%;
-      content: '';
       width: 0;
       height: 0;
       transform: translate(-50%, -50%);
@@ -33,7 +33,6 @@
       background-repeat: no-repeat;
       background-position: center;
       background-size: 100%;
-      // box-shadow: 0 4px 6px 0 rgba($primary-color, 0.15);
       &:not(:disabled).nut-radio-ani::after {
         animation: nutPulse 0.25s;
       }

src/packages/radio/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="['nut-radio', 'nut-radio-size-' + currentSize]">
+  <view :class="classes">
     <input
       type="radio"
       :value="currentValue"
@@ -9,21 +9,13 @@
       :label="label"
       @click="clickEvt"
     />
-    <span class="nut-radio-label">
+    <view class="nut-radio-label">
       <slot></slot>
-    </span>
-  </label>
+    </view>
+  </view>
 </template>
 <script lang="ts">
-import {
-  compile,
-  computed,
-  reactive,
-  ref,
-  toRefs,
-  getCurrentInstance,
-  inject
-} from 'vue';
+import { computed, getCurrentInstance, inject } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('radio');
 
@@ -32,7 +24,7 @@ type Iparent = {
 };
 export default create({
   props: {
-    modelValue: {
+    value: {
       type: [String, Number, Boolean],
       default: false
     },
@@ -51,71 +43,59 @@ export default create({
     }
   },
 
-  emits: ['input', 'update:modelValue', 'change'],
+  emits: ['update:value', 'change'],
   setup(props, { emit }) {
     const parentGroup = inject('radiogroup', {
       parentNode: false,
-      changeVal: val => {
-        console.log();
-      }
+      changeVal: (val: string) => {}
     });
     const internalInstance = getCurrentInstance()?.parent;
     const parentProps = internalInstance?.props;
 
+    const isParentGroup = computed(() => parentGroup && parentGroup.parentNode);
+
+    const currentSize = computed(() => {
+      return isParentGroup.value ? parentProps?.size : props.size;
+    });
+
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}-size-${currentSize.value}`]: true
+      };
+    });
+
     const currentValue = computed({
       get: () => {
-        if (parentGroup && parentGroup.parentNode) {
-          return parentProps?.modelValue;
-        } else {
-          return props.modelValue;
-        }
+        return isParentGroup.value ? parentProps?.value : props.value;
       },
-      set: val => {
-        if (parentGroup && parentGroup.parentNode) {
-          parentGroup?.changeVal(val);
-        } else {
-          emit('input', val);
-        }
-      }
-    });
-
-    const currentSize = computed(() => {
-      if (parentGroup && parentGroup.parentNode) {
-        return parentProps?.size;
-      } else {
-        return props.size;
+      set: (val: any) => {
+        isParentGroup.value ? parentGroup.changeVal(val) : emit('change', val);
       }
     });
 
     const isDisabled = computed(() => {
-      if (parentGroup && parentGroup.parentNode) {
-        return parentProps?.disabled;
-      } else {
-        return props.disabled;
-      }
+      return isParentGroup.value ? parentProps?.disabled : props.disabled;
     });
 
     const isAnimated = computed(() => {
-      if (parentGroup && parentGroup.parentNode) {
-        return parentProps?.animated;
-      } else {
-        return props.animated;
-      }
+      return isParentGroup ? parentProps?.animated : props.animated;
     });
 
-    const clickEvt = (event: any) => {
-      event?.stopPropagation();
+    const clickEvt = (event: Event) => {
+      event.stopPropagation();
       if (isDisabled.value) {
         return false;
       }
       currentValue.value = props.label ?? '';
-      emit('update:modelValue', props.label);
-      emit('change', props.label, event);
+      emit('update:value', currentValue.value);
+      emit('change', currentValue.value);
     };
 
     return {
+      classes,
       currentValue,
-      currentSize,
       isDisabled,
       isAnimated,
       clickEvt

src/packages/radiogroup/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <view class="nut-radiogroup">
+  <view :class="classes">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
-import { toRefs, provide, watch } from 'vue';
+import { provide, watch, computed } from 'vue';
 import { createComponent } from '@/utils/create';
 const { componentName, create } = createComponent('radiogroup');
 
 export default create({
   props: {
-    modelValue: {
+    value: {
       type: [String, Number, Boolean],
       default: false
     },
@@ -27,20 +27,29 @@ export default create({
       default: true
     }
   },
-  emits: ['change', 'update:modelValue'],
+  emits: ['change', 'update:value'],
   setup(props, { emit }) {
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
     watch(
-      () => props.modelValue,
+      () => props.value,
       value => {
-        emit('change', value, event);
+        emit('change', value);
       }
     );
     provide('radiogroup', {
       parentNode: true,
       changeVal: (val: string | number) => {
-        emit('update:modelValue', val);
+        emit('change', val);
+        emit('update:value', val);
       }
     });
+
+    return {};
   }
 });
 </script>