feat(radio、radiogroup): add props direction、shape

src/packages/__VUE/radio/demo.vue

@@ -1,73 +1,75 @@
 <template>
-  <div class="demo demo-nut-radio">
-    <nut-cell-group title="基本用法-左右侧">
+  <div class="demo full">
+    <nut-cell-group title="基本用法">
       <nut-cell>
-        <nut-radiogroup v-model="radioVal" @change="handleChange1">
-          <nut-radio :label="1">单选框1</nut-radio>
-          <nut-radio :label="2">单选框2</nut-radio>
+        <nut-radiogroup v-model="radioVal">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio disabled label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
-        <nut-radiogroup
-          v-model="radioVal"
-          text-position="left"
-          @change="handleChange1"
-        >
-          <nut-radio :label="1">单选框1</nut-radio>
-          <nut-radio :label="2">单选框2</nut-radio>
+        <nut-radiogroup v-model="radioVal" text-position="left">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio disabled label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
-        <div class="demo-check">当前选中值</div>
-        <div>{{ radioVal }}</div>
+        <nut-radiogroup v-model="radioVal">
+          <nut-radio shape="button" label="1">选项1</nut-radio>
+          <nut-radio disabled shape="button" label="2">选项2</nut-radio>
+          <nut-radio shape="button" label="3">选项3</nut-radio>
+        </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
-
-    <nut-cell-group title="单选框禁用">
+    <nut-cell-group title="水平使用">
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal" direction="horizontal">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal" text-position="left" direction="horizontal">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
       <nut-cell>
-        <nut-radiogroup v-model="radioVal3">
-          <nut-radio :label="1" disabled>禁用单选框</nut-radio>
-          <nut-radio :label="2" disabled>禁用单选框</nut-radio>
+        <nut-radiogroup v-model="radioVal" direction="horizontal">
+          <nut-radio shape="button" label="1">选项1</nut-radio>
+          <nut-radio shape="button" label="2">选项2</nut-radio>
+          <nut-radio shape="button" label="3">选项3</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="自定义尺寸">
       <nut-cell>
         <nut-radiogroup v-model="radioVal4">
-          <nut-radio :label="1" icon-size="12">自定义尺寸12</nut-radio>
-          <nut-radio :label="2" icon-size="12">自定义尺寸12</nut-radio>
+          <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
+          <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="Radio自定义图标">
       <nut-cell>
         <nut-radiogroup v-model="radioVal5">
-          <nut-radio
-            :label="1"
-            icon-name="checklist"
-            icon-active-name="checklist"
-            >自定义图标</nut-radio
-          >
-          <nut-radio
-            :label="2"
-            icon-name="checklist"
-            icon-active-name="checklist"
-            >自定义图标</nut-radio
-          >
+          <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
+          <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="触发事件">
       <nut-cell>
-        <nut-radiogroup v-model="radioVal6" @change="handleChange3">
-          <nut-radio :label="1">触发事件</nut-radio>
-          <nut-radio :label="2">触发事件</nut-radio>
+        <nut-radiogroup v-model="radioVal6" @change="handleChange">
+          <nut-radio label="1">触发事件</nut-radio>
+          <nut-radio label="2">触发事件</nut-radio>
         </nut-radiogroup>
       </nut-cell>
-      <nut-cell>
-        <div class="demo-check">当前选中值</div>
-        <div>{{ radioVal6 }}</div>
-      </nut-cell>
+      <nut-cell title="当前选中值" :desc="radioVal6"></nut-cell>
     </nut-cell-group>
   </div>
 </template>
@@ -75,7 +77,6 @@
 <script lang="ts">
 import { createComponent } from '../../utils/create';
 import { reactive, toRefs } from 'vue';
-import { Toast } from '@/packages/nutui.vue';
 const { createDemo } = createComponent('radio');
 export default createDemo({
   props: {},
@@ -88,32 +89,15 @@ export default createDemo({
       radioVal5: 1,
       radioVal6: 1
     });
-    const handleChange1 = (value: any) => {
+    const handleChange = (value: any) => {
       console.log(value);
     };
-    const handleChange2 = (value: any) => {
-      console.log(value);
-    };
-    const handleChange3 = (value: any) => {
-      Toast.text(`您选中了${value}`);
-    };
     return {
       ...toRefs(data),
-      handleChange1,
-      handleChange2,
-      handleChange3
+      handleChange
     };
   }
 });
 </script>
 
-<style lang="scss" scoped>
-.demo-check {
-  margin-right: 10px;
-}
-.demo-nut-radio {
-  .nut-radio {
-    margin-bottom: 8px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>

src/packages/__VUE/radio/doc.md

@@ -23,8 +23,19 @@ app.use(RadioGroup);
 
 ```html
 <nut-radiogroup v-model="radioVal">
-  <nut-radio :label="1">单选框1</nut-radio>
-  <nut-radio :label="2">单选框2</nut-radio>
+  <nut-radio label="1">选项1</nut-radio>
+  <nut-radio disabled label="2">选项2</nut-radio>
+  <nut-radio label="3">选项3</nut-radio>
+</nut-radiogroup>
+<nut-radiogroup v-model="radioVal" text-position="left">
+  <nut-radio label="1">选项1</nut-radio>
+  <nut-radio disabled label="2">选项2</nut-radio>
+  <nut-radio label="3">选项3</nut-radio>
+</nut-radiogroup>
+<nut-radiogroup v-model="radioVal">
+  <nut-radio shape="button" label="1">选项1</nut-radio>
+  <nut-radio disabled shape="button" label="2">选项2</nut-radio>
+  <nut-radio shape="button" label="3">选项3</nut-radio>
 </nut-radiogroup>
 ```
 ```ts
@@ -34,27 +45,36 @@ setup() {
   };
 }
 ```
-
-## 禁用选择
+## 水平使用
 
 ```html
-<nut-radiogroup v-model="radioVal3">
-  <nut-radio :label="1" disabled>禁用单选框</nut-radio>
-  <nut-radio :label="2" disabled>禁用单选框</nut-radio>
+<nut-radiogroup v-model="radioVal" direction="horizontal">
+  <nut-radio label="1">选项1</nut-radio>
+  <nut-radio disabled label="2">选项2</nut-radio>
+  <nut-radio label="3">选项3</nut-radio>
+</nut-radiogroup>
+<nut-radiogroup v-model="radioVal" text-position="left" direction="horizontal">
+  <nut-radio label="1">选项1</nut-radio>
+  <nut-radio disabled label="2">选项2</nut-radio>
+  <nut-radio label="3">选项3</nut-radio>
+</nut-radiogroup>
+<nut-radiogroup v-model="radioVal" direction="horizontal">
+  <nut-radio shape="button" label="1">选项1</nut-radio>
+  <nut-radio disabled shape="button" label="2">选项2</nut-radio>
+  <nut-radio shape="button" label="3">选项3</nut-radio>
 </nut-radiogroup>
 ```
 ```ts
 setup() {
   return {
-    radioVal3:"1",
+    radioVal:"1",
   };
 }
 ```
-
 ## 自定义尺寸
 
 ```html
-<nut-radiogroup v-model="radioVal4">
+<nut-radiogroup v-model="radioVal">
   <nut-radio :label="1" icon-size="12">自定义尺寸12</nut-radio>
   <nut-radio :label="2" icon-size="12">自定义尺寸12</nut-radio>
 </nut-radiogroup>
@@ -62,7 +82,7 @@ setup() {
 ```ts
 setup() {
   return {
-    radioVal4:"1",
+    radioVal:"1",
   };
 }
 ```
@@ -72,7 +92,7 @@ setup() {
 建议 `icon-name` `icon-active-name` 一起修改
 
 ```html
-<nut-radiogroup v-model="radioVal5">
+<nut-radiogroup v-model="radioVal">
   <nut-radio :label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
   <nut-radio :label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
 </nut-radiogroup>
@@ -80,7 +100,7 @@ setup() {
 ```ts
 setup() {
   return {
-    radioVal5:"1",
+    radioVal:"1",
   };
 }
 ```
@@ -88,19 +108,19 @@ setup() {
 ## 触发 change 事件
 
 ```html
-<nut-radiogroup v-model="radioVal6" @change="handleChange3">
+<nut-radiogroup v-model="radioVal" @change="handleChange">
   <nut-radio :label="1" >触发事件</nut-radio>
   <nut-radio :label="2" >触发事件</nut-radio>
 </nut-radiogroup>
 ```
 ```ts
 setup() {
-  const handleChange3 = (value: any) => {
-    Toast.text(`您选中了${value}`);
+  const handleChange = (value: any) => {
+    console.log(value)
   }
   return {
-    radioVal6:"1",
-    handleChange3
+    radioVal:"1",
+    handleChange
   };
 }
 ```
@@ -109,23 +129,25 @@ setup() {
 
 ### Radio
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| disabled | 是否禁用选择 | Boolean | `false`
-| icon-size | [图标尺寸](#/icon) | String、Number | `18`
-| icon-name | [图标名称](#/icon)，选中前(建议和`icon-active-name`一起修改) | String | `'check-normal'`
-| icon-active-name | [图标名称](#/icon)，选中后(建议和`icon-name`一起修改) | String | `'check-checked'`
-| label | 单选框标识 | String、Number、Boolean | -
+| 字段             | 说明                                                         | 类型                    | 默认值            |
+|------------------|--------------------------------------------------------------|-------------------------|-------------------|
+| disabled         | 是否禁用选择                                                 | Boolean                 | `false`           |
+| icon-size        | [图标尺寸](#/icon)                                           | String、Number          | `18`              |
+| icon-name        | [图标名称](#/icon)，选中前(建议和`icon-active-name`一起修改) | String                  | `'check-normal'`  |
+| icon-active-name | [图标名称](#/icon)，选中后(建议和`icon-name`一起修改)        | String                  | `'check-checked'` |
+| label            | 单选框标识                                                   | String、Number、Boolean | -                 |
+| shape            | 形状，可选值为 button、round                                 | String                  | round             |
 
 ### RadioGroup
 
-| 字段 | 说明 | 类型 | 默认值
-|----- | ----- | ----- | ----- 
-| v-model | 当前选中项的标识符，与label值一致时呈选中状态 | String、Number、Boolean | -
-| text-position | 文本所在的位置，可选值：`left`,`right` | String | `right`
+| 字段          | 说明                                          | 类型                    | 默认值     |
+|---------------|-----------------------------------------------|-------------------------|------------|
+| v-model       | 当前选中项的标识符，与label值一致时呈选中状态 | String、Number、Boolean | -          |
+| text-position | 文本所在的位置，可选值：`left`,`right`        | String                  | `right`    |
+| direction     | 使用横纵方向 可选值 horizontal、vertical      | String                  | `vertical` |
 
 ## RadioGroup Event
 
-| 字段 | 说明 | 回调参数 
-|----- | ----- | ----- 
-| change | 值变化时触发 | 当前选中项值（label）【设置label后有值、默认为空】
+| 字段   | 说明         | 回调参数                                           |
+|--------|--------------|----------------------------------------------------|
+| change | 值变化时触发 | 当前选中项值（label）【设置label后有值、默认为空】 |

src/packages/__VUE/radio/index.scss

@@ -1,23 +1,51 @@
 .nut-radio {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
+
+  &:last-child {
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
+  }
+
   &--reverse {
-    flex-direction: row-reverse;
     .nut-radio__label {
       margin-right: 15px;
       margin-left: 0;
     }
   }
+
+  &__button {
+    display: inline-flex;
+    align-items: center;
+    padding: 5px 18px;
+    font-size: 12px;
+    background: #f6f7f9;
+    border-radius: 15px;
+    color: $radio-label-font-color;
+    box-sizing: border-box;
+    &--active {
+      background: $radio-label-button-background;
+      color: $radio-label-font-active-color;
+      border: 1px solid $radio-label-button-border-color;
+    }
+    &--disabled {
+      color: $radio-label-disable-color;
+      border: none;
+    }
+  }
+
   &__label {
     margin-left: 15px;
-    font-size: 16px;
-    color: $radio-label-color;
+    font-size: 14px;
+    color: $radio-label-font-color;
     &--disabled {
       color: $radio-label-disable-color;
     }
   }
+
   &__icon {
-    color: $primary-color;
+    color: $radio-label-font-active-color;
     transition-duration: 0.3s;
     transition-property: color, border-color, background-color;
   }

src/packages/__VUE/radio/index.taro.vue

@@ -10,8 +10,12 @@ export default create({
       type: Boolean,
       default: false
     },
-    label: {
+    shape: {
       type: String,
+      default: 'round' // button
+    },
+    label: {
+      type: [String, Number],
       default: ''
     },
     iconName: {
@@ -31,7 +35,7 @@ export default create({
     let parent: any = inject('parent');
 
     const isCurValue = computed(() => {
-      return parent.label.value === props.label;
+      return parent.label.value == props.label;
     });
 
     const color = computed(() => {
@@ -59,8 +63,17 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName}__label ${
-            props.disabled ? `${componentName}__label--disabled` : ''
+          class: `${componentName}__label ${props.disabled ? `${componentName}__label--disabled` : ''}`
+        },
+        slots.default?.()
+      );
+    };
+    const renderButton = () => {
+      return h(
+        'view',
+        {
+          class: `${componentName}__button ${isCurValue.value && `${componentName}__button--active`} ${
+            props.disabled ? `${componentName}__button--disabled` : ''
           }`
         },
         slots.default?.()
@@ -72,16 +85,22 @@ export default create({
       parent.updateValue(props.label);
     };
 
+    let reverseState = position.value === 'left';
+
     return () => {
       return h(
         'view',
         {
-          class: `${componentName} ${
-            position.value === 'left' ? `${componentName}--reverse` : ''
-          }`,
+          class: `${componentName} ${componentName}--${props.shape} ${reverseState ? `${componentName}--reverse` : ''}`,
           onClick: handleClick
         },
-        [renderIcon(), renderLabel()]
+        [
+          props.shape == 'button'
+            ? renderButton()
+            : reverseState
+            ? [renderLabel(), renderIcon()]
+            : [renderIcon(), renderLabel()]
+        ]
       );
     };
   }

src/packages/__VUE/radio/index.vue

@@ -10,8 +10,12 @@ export default create({
       type: Boolean,
       default: false
     },
-    label: {
+    shape: {
       type: String,
+      default: 'round' // button
+    },
+    label: {
+      type: [String, Number],
       default: ''
     },
     iconName: {
@@ -31,7 +35,7 @@ export default create({
     let parent: any = inject('parent');
 
     const isCurValue = computed(() => {
-      return parent.label.value === props.label;
+      return parent.label.value == props.label;
     });
 
     const color = computed(() => {
@@ -59,8 +63,17 @@ export default create({
       return h(
         'view',
         {
-          class: `${componentName}__label ${
-            props.disabled ? `${componentName}__label--disabled` : ''
+          class: `${componentName}__label ${props.disabled ? `${componentName}__label--disabled` : ''}`
+        },
+        slots.default?.()
+      );
+    };
+    const renderButton = () => {
+      return h(
+        'view',
+        {
+          class: `${componentName}__button ${isCurValue.value && `${componentName}__button--active`} ${
+            props.disabled ? `${componentName}__button--disabled` : ''
           }`
         },
         slots.default?.()
@@ -72,16 +85,22 @@ export default create({
       parent.updateValue(props.label);
     };
 
+    let reverseState = position.value === 'left';
+
     return () => {
       return h(
         'view',
         {
-          class: `${componentName} ${
-            position.value === 'left' ? `${componentName}--reverse` : ''
-          }`,
+          class: `${componentName} ${componentName}--${props.shape} ${reverseState ? `${componentName}--reverse` : ''}`,
           onClick: handleClick
         },
-        [renderIcon(), renderLabel()]
+        [
+          props.shape == 'button'
+            ? renderButton()
+            : reverseState
+            ? [renderLabel(), renderIcon()]
+            : [renderIcon(), renderLabel()]
+        ]
       );
     };
   }

src/packages/__VUE/radiogroup/demo.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="demo">
-    <h2>基础用法</h2>
-    <nut-cell>
-      <nut-temp name="wifi"></nut-temp>
-      <nut-temp name="mail" txt="test txt"></nut-temp>
-    </nut-cell>
-  </div>
-</template>
-
-<script lang="ts">
-import { createComponent } from '../../utils/create';
-const { createDemo } = createComponent('radiogroup');
-export default createDemo({
-  props: {},
-  setup() {
-    return {};
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.nut-temp {
-}
-</style>

src/packages/__VUE/radiogroup/doc.md

@@ -1,34 +0,0 @@
-#  radiogroup组件
-
-    ### 介绍
-    
-    基于 xxxxxxx
-    
-    ### 安装
-    
-    
-    
-    ## 代码演示
-    
-    ### 基础用法1
-    
-
-    
-    ## API
-    
-    ### Props
-    
-    | 参数         | 说明                             | 类型   | 默认值           |
-    |--------------|----------------------------------|--------|------------------|
-    | name         | 图标名称或图片链接               | String | -                |
-    | color        | 图标颜色                         | String | -                |
-    | size         | 图标大小，如 '20px' '2em' '2rem' | String | -                |
-    | class-prefix | 类名前缀，用于使用自定义图标     | String | 'nutui-iconfont' |
-    | tag          | HTML 标签                        | String | 'i'              |
-    
-    ### Events
-    
-    | 事件名 | 说明           | 回调参数     |
-    |--------|----------------|--------------|
-    | click  | 点击图标时触发 | event: Event |
-    

src/packages/__VUE/radiogroup/index.scss

@@ -1,2 +1,22 @@
 .nut-radiogroup {
+  display: inline-block;
+  .nut-radio {
+    margin-bottom: 5px;
+  }
+  &--vertical {
+  }
+  &--horizontal {
+    .nut-radio {
+      display: inline-flex;
+      margin-right: 10px;
+      &--round {
+        .nut-radio__label {
+          margin: 0 6px;
+        }
+      }
+      &--button {
+        // ...
+      }
+    }
+  }
 }

src/packages/__VUE/radiogroup/index.vue

@@ -9,6 +9,10 @@ export default create({
       type: [Number, String, Boolean],
       default: ''
     },
+    direction: {
+      type: String,
+      default: 'vertical' //horizontal
+    },
     textPosition: {
       type: String,
       default: 'right'
@@ -16,8 +20,7 @@ export default create({
   },
   emits: ['change', 'update:modelValue'],
   setup(props, { emit, slots }) {
-    const updateValue = (value: string | boolean | number) =>
-      emit('update:modelValue', value);
+    const updateValue = (value: string | boolean | number) => emit('update:modelValue', value);
 
     provide('parent', {
       label: readonly(computed(() => props.modelValue)),
@@ -27,14 +30,14 @@ export default create({
 
     watch(
       () => props.modelValue,
-      value => emit('change', value)
+      (value) => emit('change', value)
     );
 
     return () => {
       return h(
         'view',
         {
-          class: `${componentName}`
+          class: `${componentName} ${componentName}--${props.direction}`
         },
         slots.default?.()
       );

src/packages/styles/variables.scss

@@ -258,10 +258,13 @@ $checkbox-label-disable-color: #999 !default;
 $checkbox-icon-disable-color: #d6d6d6 !default;
 
 //radio
-$radio-label-color: #1d1e1e !default;
+$radio-label-font-color: #1d1e1e !default;
+$radio-label-font-active-color: #f0250f !default;
 $radio-label-disable-color: #999 !default;
 $radio-icon-disable-color: #d6d6d6 !default;
 
+$radio-label-button-border-color: #f0250f !default;
+$radio-label-button-background: rgba(240, 37, 15, 0.05) !default;
 //fixednav
 $fixednav-bg-color: $white !default;
 $fixednav-font-color: $black !default;

src/sites/mobile-taro/vue/src/dentry/pages/radio/index.vue

@@ -1,73 +1,75 @@
 <template>
-  <div class="demo demo-nut-radio">
-    <nut-cell-group title="基本用法-左右侧">
+  <div class="demo full">
+    <nut-cell-group title="基本用法">
       <nut-cell>
-        <nut-radiogroup v-model="radioVal" @change="handleChange1">
-          <nut-radio :label="1">单选框1</nut-radio>
-          <nut-radio :label="2">单选框2</nut-radio>
+        <nut-radiogroup v-model="radioVal">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio disabled label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
-        <nut-radiogroup
-          v-model="radioVal"
-          text-position="left"
-          @change="handleChange1"
-        >
-          <nut-radio :label="1">单选框1</nut-radio>
-          <nut-radio :label="2">单选框2</nut-radio>
+        <nut-radiogroup v-model="radioVal" text-position="left">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio disabled label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
         </nut-radiogroup>
       </nut-cell>
       <nut-cell>
-        <div class="demo-check">当前选中值</div>
-        <div>{{ radioVal }}</div>
+        <nut-radiogroup v-model="radioVal">
+          <nut-radio shape="button" label="1">选项1</nut-radio>
+          <nut-radio disabled shape="button" label="2">选项2</nut-radio>
+          <nut-radio shape="button" label="3">选项3</nut-radio>
+        </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
-
-    <nut-cell-group title="单选框禁用">
+    <nut-cell-group title="水平使用">
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal" direction="horizontal">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
+      <nut-cell>
+        <nut-radiogroup v-model="radioVal" text-position="left" direction="horizontal">
+          <nut-radio label="1">选项1</nut-radio>
+          <nut-radio label="2">选项2</nut-radio>
+          <nut-radio label="3">选项3</nut-radio>
+        </nut-radiogroup>
+      </nut-cell>
       <nut-cell>
-        <nut-radiogroup v-model="radioVal3">
-          <nut-radio :label="1" disabled>禁用单选框</nut-radio>
-          <nut-radio :label="2" disabled>禁用单选框</nut-radio>
+        <nut-radiogroup v-model="radioVal" direction="horizontal">
+          <nut-radio shape="button" label="1">选项1</nut-radio>
+          <nut-radio shape="button" label="2">选项2</nut-radio>
+          <nut-radio shape="button" label="3">选项3</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="自定义尺寸">
       <nut-cell>
         <nut-radiogroup v-model="radioVal4">
-          <nut-radio :label="1" icon-size="12">自定义尺寸12</nut-radio>
-          <nut-radio :label="2" icon-size="12">自定义尺寸12</nut-radio>
+          <nut-radio label="1" icon-size="12">自定义尺寸12</nut-radio>
+          <nut-radio label="2" icon-size="12">自定义尺寸12</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="Radio自定义图标">
       <nut-cell>
         <nut-radiogroup v-model="radioVal5">
-          <nut-radio
-            :label="1"
-            icon-name="checklist"
-            icon-active-name="checklist"
-            >自定义图标</nut-radio
-          >
-          <nut-radio
-            :label="2"
-            icon-name="checklist"
-            icon-active-name="checklist"
-            >自定义图标</nut-radio
-          >
+          <nut-radio label="1" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
+          <nut-radio label="2" icon-name="checklist" icon-active-name="checklist">自定义图标</nut-radio>
         </nut-radiogroup>
       </nut-cell>
     </nut-cell-group>
     <nut-cell-group title="触发事件">
       <nut-cell>
-        <nut-radiogroup v-model="radioVal6" @change="handleChange3">
-          <nut-radio :label="1">触发事件</nut-radio>
-          <nut-radio :label="2">触发事件</nut-radio>
+        <nut-radiogroup v-model="radioVal6" @change="handleChange">
+          <nut-radio label="1">触发事件</nut-radio>
+          <nut-radio label="2">触发事件</nut-radio>
         </nut-radiogroup>
       </nut-cell>
-      <nut-cell>
-        <div class="demo-check">当前选中值</div>
-        <div>{{ radioVal6 }}</div>
-      </nut-cell>
+      <nut-cell title="当前选中值" :desc="radioVal6"></nut-cell>
     </nut-cell-group>
   </div>
 </template>
@@ -85,32 +87,15 @@ export default {
       radioVal5: 1,
       radioVal6: 1
     });
-    const handleChange1 = (value: any) => {
+    const handleChange = (value: any) => {
       console.log(value);
     };
-    const handleChange2 = (value: any) => {
-      console.log(value);
-    };
-    const handleChange3 = (value: any) => {
-      console.log(`您选中了${value}`);
-    };
     return {
       ...toRefs(data),
-      handleChange1,
-      handleChange2,
-      handleChange3
+      handleChange
     };
   }
 };
 </script>
 
-<style lang="scss">
-.demo-check {
-  margin-right: 10px;
-}
-.demo-nut-radio {
-  .nut-radio {
-    margin-bottom: 8px;
-  }
-}
-</style>
+<style lang="scss" scoped></style>