From b72b7ec504c884f1ea1aeb15b922032f27436752 Mon Sep 17 00:00:00 2001
From: Jay <xuehongjiej@163.com>
Date: Mon, 6 Dec 2021 00:54:10 +0800
Subject: [PATCH] =?UTF-8?q?docs(radio):=20=E6=96=B0=E5=A2=9E=20radio=20?=
 =?UTF-8?q?=E8=8B=B1=E6=96=87=E6=96=87=E6=A1=A3=EF=BC=8C=E4=B8=AD=E6=96=87?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3=E9=83=A8=E5=88=86=E6=8F=8F=E8=BF=B0=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../devui-vue/docs/components/radio/index.md  |  10 +-
 .../docs/en-US/components/radio/index.md      | 313 ++++++++++++++++++
 2 files changed, 321 insertions(+), 2 deletions(-)
 create mode 100644 packages/devui-vue/docs/en-US/components/radio/index.md

diff --git a/packages/devui-vue/docs/components/radio/index.md b/packages/devui-vue/docs/components/radio/index.md
index 3ab37dd6..c31e8dbb 100644
--- a/packages/devui-vue/docs/components/radio/index.md
+++ b/packages/devui-vue/docs/components/radio/index.md
@@ -44,7 +44,9 @@ export default defineComponent({
 
 ### radio 根据条件终止切换操作
 
-:::demo 根据条件判断，第二项禁止跳转。
+根据条件判断，第二项禁止跳转。
+
+:::demo
 
 ```vue
 <template>
@@ -88,6 +90,8 @@ export default defineComponent({
 
 ### radio-group 根据条件终止切换操作
 
+根据条件判断，第二个radio-group禁止跳转。
+
 :::demo
 
 ```vue
@@ -233,7 +237,9 @@ export default defineComponent({
 
 ### 自定义单选项
 
-:::demo 数组源可为普通数组、对象数组等。
+数组源可为普通数组、对象数组等。
+
+:::demo
 
 ```vue
 <template>
diff --git a/packages/devui-vue/docs/en-US/components/radio/index.md b/packages/devui-vue/docs/en-US/components/radio/index.md
new file mode 100644
index 00000000..1a682214
--- /dev/null
+++ b/packages/devui-vue/docs/en-US/components/radio/index.md
@@ -0,0 +1,313 @@
+# Radio
+
+Radio button.
+
+### When To Use
+
+The user selects a single option from a dataset and can view all options.
+
+### Independent Radios
+
+:::demo
+
+```vue
+<template>
+  <d-radio
+    v-for="item in list"
+    v-model="choose"
+    :key="item"
+    :value="item"
+    :style="{ marginBottom: '20px' }"
+  >
+    The Radio value is: {{ item }}
+  </d-radio>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const list = ref(['Item1', 'Item2', 'Item3'])
+    let choose = ref('Item1')
+
+    return {
+      list,
+      choose,
+    }
+  },
+})
+</script>
+```
+
+:::
+
+### Switch with Condition
+
+The second item cannot be redirected based on the condition.
+
+:::demo
+
+```vue
+<template>
+  <d-radio
+    v-for="item in list"
+    v-model="choose"
+    :key="item"
+    :value="item"
+    :beforeChange="beforeChange"
+    :style="{ marginBottom: '20px' }"
+    @change="valChange"
+  >
+    The Radio value is: {{ item }}
+  </d-radio>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const list = ref(['Item1', 'Item2', 'Item3'])
+    let choose = ref('Item1')
+
+    return {
+      list,
+      choose,
+      beforeChange(value) {
+        return value !== 'Item2'
+      },
+      valChange(val) {
+        console.log('current value', val)
+      },
+    }
+  },
+})
+</script>
+```
+
+:::
+
+### Switch With Condition in A Radio Group
+
+The second radio group is not allowed to jump.
+
+:::demo
+
+```vue
+<template>
+  <d-radio-group css-style="row" v-model="choose" :beforeChange="beforeChange">
+    <d-radio v-for="item in list" :key="item" :value="item">
+      {{ item }}
+    </d-radio>
+  </d-radio-group>
+  <d-radio-group v-model="choose2" css-style="row" disabled>
+    <d-radio v-for="item in list2" :key="item" :value="item">
+      {{ item }}
+    </d-radio>
+  </d-radio-group>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const list = ref(['Item1', 'Item2', 'Item3'])
+    let choose = ref('Item1')
+
+    const list2 = ['Spring', 'Summer', 'Autumn', 'Winter']
+    const choose2 = ref('Summer')
+
+    return {
+      list,
+      choose,
+      list2,
+      choose2,
+      beforeChange(value) {
+        return value !== 'Item2'
+      },
+    }
+  },
+})
+</script>
+```
+
+:::
+
+### Disabled Radio
+
+:::demo
+
+```vue
+<template>
+  <d-radio
+    v-for="item in list"
+    v-model="choose"
+    :key="item"
+    :value="item"
+    :style="{ marginBottom: '20px' }"
+    disabled
+  >
+    The Radio value is: {{ item }}
+  </d-radio>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const list = ref(['Item1', 'Item2', 'Item3'])
+    let choose = ref('Item1')
+
+    return {
+      list,
+      choose,
+    }
+  },
+})
+</script>
+```
+
+:::
+
+### Horizontal Arrangement
+
+:::demo
+
+```vue
+<template>
+  <d-radio-group css-style="row" v-model="choose">
+    <d-radio v-for="item in list" :key="item" :value="item">
+      The Radio value is: {{ item }}
+    </d-radio>
+  </d-radio-group>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const list = ref(['Item1', 'Item2', 'Item3'])
+    let choose = ref('Item1')
+
+    return {
+      list,
+      choose,
+    }
+  },
+})
+</script>
+```
+
+:::
+
+### Vertical Arrangement
+
+:::demo
+
+```vue
+<template>
+  <d-radio-group :values="list" v-model="choose"></d-radio-group>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const list = ['Spring', 'Summer', 'Autumn', 'Winter']
+    const choose = ref('Summer')
+
+    return {
+      list,
+      choose,
+      valChange(val) {
+        console.log('current value', val)
+      },
+    }
+  },
+})
+</script>
+```
+
+:::
+
+### Custom Radios
+
+The array source can be a common array or an object array.
+
+:::demo
+
+```vue
+<template>
+  <d-radio-group css-style="row" v-model="choose">
+    <d-radio v-for="item in list" :key="item" :value="item">
+      The Radio value is: {{ item }}
+    </d-radio>
+  </d-radio-group>
+  <d-radio-group css-style="row" v-model="choose2">
+    <d-radio v-for="item in list2" :key="item.name" :value="item.name">
+      The Radio value is: {{ item.name }}
+    </d-radio>
+  </d-radio-group>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue'
+
+export default defineComponent({
+  setup() {
+    const list = ref(['Item1', 'Item2', 'Item3'])
+    let choose = ref('Item1')
+
+    const list2 = [{ name: 'Item1' }, { name: 'Item2' }, { name: 'Item3' }]
+    let choose2 = ref('Item3')
+
+    return {
+      list,
+      choose,
+      list2,
+      choose2,
+    }
+  },
+})
+</script>
+```
+
+:::
+
+### API
+
+d-radio Parameters
+
+|  Parameter   |         Type         | Default | Description                                                                                                                                  | Jump to Demo                                    |
+| :----------: | :------------------: | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- |
+|     name     |       `string`       |   --    | Optional. Single-option name                                                                                                                 | [Independent Radios](#independent-radios)       |
+|    value     |       `string`       |   --    | Required. Single-option value                                                                                                                | [Independent Radios](#independent-radios)       |
+|   disabled   |      `boolean`       |  false  | Optional. Whether to disable this option.                                                                                                    | [Disabled Radio](#disabled-radio)               |
+| beforeChange | `Function / Promise` |   --    | Callback function before radio switching, which is optional. The return type is boolean. If false is returned, radio switching is prevented. | [Switch with Condition](#switch-with-condition) |
+
+d-radio Event
+
+| Parameter |          Type          | Description                                                                                                    | Jump to Demo                              |
+| :-------: | :--------------------: | :------------------------------------------------------------------------------------------------------------- | ----------------------------------------- |
+|  change   | `EventEmitter<string>` | Form event. This event is triggered when the value of a single option changes. The selected value is returned. | [Independent Radios](#independent-radios) |
+
+d-radio-group Parameters
+
+|  Parameter   |         Type         | Default  | Description                                                                                                                                        | Jump to Demo                                                                      |
+| :----------: | :------------------: | :------: | :------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+|     name     |       `string`       |    --    | Optional. Single-option name (unique identifier of the radio)                                                                                      | [Horizontal Arrangement](#horizontal-arrangement)                                 |
+|    values    |       `array`        |    --    | Optional. Single-choice data group                                                                                                                 | [Horizontal Arrangement](#horizontal-arrangement)                                 |
+|   disabled   |      `boolean`       |  false   | Optional. Whether to disable this radio-group                                                                                                      | [Switch With Condition in A Radio Group](#switch-with-condition-in-a-radio-group) |
+|   cssStyle   |  `'row' / 'column'`  | 'column' | Optional. Set the horizontal or vertical arrangement                                                                                               | [Horizontal Arrangement](#horizontal-arrangement)                                 |
+| beforeChange | `Function / Promise` |    --    | Callback function before radio-group switching. The return value is of the boolean type. If false is returned, radio-group switching is prevented. | [Switch With Condition in A Radio Group](#switch-with-condition-in-a-radio-group) |
+
+d-radio-group Event
+
+| Parameter |          Type          | Description                                                                             | Jump to Demo                                      |
+| :-------: | :--------------------: | :-------------------------------------------------------------------------------------- | ------------------------------------------------- |
+|  change   | `EventEmitter<string>` | Triggered when the value of a single option changes and the selected value is returned. | [Horizontal Arrangement](#horizontal-arrangement) |
-- 
Gitee