diff --git a/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts b/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts
index c28a920c2a358187d49cb1c3bdc0d2b843bb0bab..5631096845c39f385e0e61f81757c84f02f5ce94 100644
--- a/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts
+++ b/packages/devui-vue/devui/radio/__tests__/radio-group.spec.ts
@@ -41,7 +41,7 @@ describe('RadioGroup', () => {
     expect(onChange).toHaveBeenCalledTimes(1);
   });
 
-  it('radioGroup cssStyle work', async () => {
+  it('radioGroup direction work', async () => {
     const wrapper = mount(DRadioGroup, {
       props: {
         value: 'Item1'
@@ -51,7 +51,7 @@ describe('RadioGroup', () => {
 
     await wrapper.setProps({
       value: 'Item1',
-      cssStyle: 'row'
+      direction: 'row'
     });
     expect(wrapper.html()).toMatch('is-row');
   });
diff --git a/packages/devui-vue/devui/radio/src/radio-group.tsx b/packages/devui-vue/devui/radio/src/radio-group.tsx
index f636bd062f2e6379421f45675e10e6d753f7cb17..b851a190100571dbe33c909359ef9fe5ea361543 100644
--- a/packages/devui-vue/devui/radio/src/radio-group.tsx
+++ b/packages/devui-vue/devui/radio/src/radio-group.tsx
@@ -1,7 +1,7 @@
-import { defineComponent, provide, toRef, ExtractPropTypes } from 'vue';
+import { defineComponent, provide, toRef, ExtractPropTypes } from 'vue'
 import DRadio from './radio'
-import { radioGroupProps, radioGroupInjectionKey } from './radio-types';
-import './radio-group.scss';
+import { radioGroupProps, radioGroupInjectionKey } from './radio-types'
+import './radio-group.scss'
 
 export default defineComponent({
   name: 'DRadioGroup',
@@ -10,9 +10,9 @@ export default defineComponent({
   setup(props: ExtractPropTypes<typeof radioGroupProps>, { emit }) {
     /** change 事件 */
     const emitChange = (radioValue: string) => {
-      emit('update:modelValue', radioValue);
-      emit('change', radioValue);
-    };
+      emit('update:modelValue', radioValue)
+      emit('change', radioValue)
+    }
 
     // 注入给子组件
     provide(radioGroupInjectionKey, {
@@ -21,23 +21,20 @@ export default defineComponent({
       disabled: toRef(props, 'disabled'),
       beforeChange: props.beforeChange,
       emitChange
-    });
+    })
   },
   render() {
-    const {
-      cssStyle,
-      values
-    } = this;
+    const { values, direction } = this
     /** 获取展示内容 */
     const getContent = () => {
-      const defaultSlot = this.$slots.default;
+      const defaultSlot = this.$slots.default
       // 有默认插槽则使用默认插槽
       if (defaultSlot) {
         return defaultSlot()
       }
       // 有数据列表则使用数据列表
       else if (Array.isArray(values)) {
-        return values.map(item => {
+        return values.map((item) => {
           return (
             <DRadio key={item} value={item}>
               {item}
@@ -52,15 +49,17 @@ export default defineComponent({
     }
 
     return (
-      <div class={[
-        'devui-radio-group',
-        {
-          'is-row': cssStyle === 'row',
-          'is-column': cssStyle === 'column',
-        }
-      ]}>
+      <div
+        class={[
+          'devui-radio-group',
+          {
+            'is-row': direction === 'row',
+            'is-column': direction === 'column'
+          }
+        ]}
+      >
         {getContent()}
       </div>
-    );
+    )
   }
-});
+})
diff --git a/packages/devui-vue/devui/radio/src/radio-types.ts b/packages/devui-vue/devui/radio/src/radio-types.ts
index f4aa59b76f34865db9b36dd387fd1e9ec0bf81d4..8448f86e9e2bd8ee5f21bbfe5228b628389f3314 100644
--- a/packages/devui-vue/devui/radio/src/radio-types.ts
+++ b/packages/devui-vue/devui/radio/src/radio-types.ts
@@ -44,7 +44,7 @@ export const radioGroupProps = {
     default: null,
   },
   /** 展示方式，横向/竖向 */
-  cssStyle: {
+  direction: {
     type: String as PropType<'row' | 'column'>,
     default: 'column',
   },
diff --git a/packages/devui-vue/docs/components/dropdown/index.md b/packages/devui-vue/docs/components/dropdown/index.md
index 296eb3ee9c948040a184e641372a527be92fefe3..061c602400894cb9ab570254cb4b88d7874f2a98 100644
--- a/packages/devui-vue/docs/components/dropdown/index.md
+++ b/packages/devui-vue/docs/components/dropdown/index.md
@@ -14,7 +14,7 @@
 <template>
   <div style="display:flex">
     触发方式：
-    <d-radio-group css-style="row" v-model="trigger">
+    <d-radio-group direction="row" v-model="trigger">
       <d-radio v-for="item in triggerList" :key="item" :value="item">
         {{ item }}
       </d-radio>
@@ -22,7 +22,7 @@
   </div>
   <div style="display:flex">
     关闭区域： 
-    <d-radio-group css-style="row" v-model="closeScope">
+    <d-radio-group direction="row" v-model="closeScope">
       <d-radio v-for="item in closeScopeAreas" :key="item" :value="item">
         {{ item }}
       </d-radio>
diff --git a/packages/devui-vue/docs/components/image-preview/index.md b/packages/devui-vue/docs/components/image-preview/index.md
index c16c4fc094556d0c18a10c249de50794bedb8a80..1341d044e277d0e680551eeab0e3f2e03eec30b6 100644
--- a/packages/devui-vue/docs/components/image-preview/index.md
+++ b/packages/devui-vue/docs/components/image-preview/index.md
@@ -84,7 +84,7 @@ export default defineComponent({
 ```vue
 <template>
   <div class="devui-image-preview-flex">
-    <d-radio-group css-style="row" v-model="zIndex">
+    <d-radio-group direction="row" v-model="zIndex">
       <d-radio v-for="item in zIndexList" :key="item" :value="item">
         {{ item }}
       </d-radio>
@@ -92,7 +92,7 @@ export default defineComponent({
     <span class="text">zIndex: {{ zIndex }}</span>
   </div>
   <div class="devui-image-preview-flex">
-    <d-radio-group css-style="row" v-model="backDropZIndex">
+    <d-radio-group direction="row" v-model="backDropZIndex">
       <d-radio v-for="item in backDropZIndexList" :key="item" :value="item">
         {{ item }}
       </d-radio>
diff --git a/packages/devui-vue/docs/components/overlay/index.md b/packages/devui-vue/docs/components/overlay/index.md
index 420b94f3f70b8948348ef2166e1bca3af9303321..2c1d9eba1db9b00354f0528a71e06a5c473046fe 100644
--- a/packages/devui-vue/docs/components/overlay/index.md
+++ b/packages/devui-vue/docs/components/overlay/index.md
@@ -56,19 +56,19 @@ export default defineComponent({
     <div class="w-full mt-20">
       <div class="flex mt-20">
         <span style="width: 300px">依赖元素的 X 轴(position.originX)：</span>
-        <d-radio-group v-model="position.originX" :values="horizontalProps" css-style="row"/>
+        <d-radio-group v-model="position.originX" :values="horizontalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">依赖元素的 Y 轴(position.originY)：</span>
-        <d-radio-group v-model="position.originY" :values="verticalProps" css-style="row"/>
+        <d-radio-group v-model="position.originY" :values="verticalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">Overlay X 轴(position.overlayX)：</span>
-        <d-radio-group v-model="position.overlayX" :values="horizontalProps" css-style="row"/>
+        <d-radio-group v-model="position.overlayX" :values="horizontalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">Overlay Y 轴(position.overlayY)：</span>
-        <d-radio-group v-model="position.overlayY" :values="verticalProps" css-style="row"/>
+        <d-radio-group v-model="position.overlayY" :values="verticalProps" direction="row"/>
       </div>
       <div class="flex mt-20">
         <span style="width: 300px">背景交互(hasBackdrop)：</span>
diff --git a/packages/devui-vue/docs/components/radio/index.md b/packages/devui-vue/docs/components/radio/index.md
index c31e8dbb0968cee9bf68f9dce2cd0544706e2587..27f27613e8ce63bbc19c264a701892fb4b8c43d7 100644
--- a/packages/devui-vue/docs/components/radio/index.md
+++ b/packages/devui-vue/docs/components/radio/index.md
@@ -96,12 +96,12 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose" :beforeChange="beforeChange">
+  <d-radio-group direction="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-group v-model="choose2" direction="row" disabled>
     <d-radio v-for="item in list2" :key="item" :value="item">
       {{ item }}
     </d-radio>
@@ -178,7 +178,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="row" v-model="choose">
     <d-radio v-for="item in list" :key="item" :value="item">
       The Radio value is: {{ item }}
     </d-radio>
@@ -243,12 +243,12 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="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-group direction="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>
@@ -303,7 +303,7 @@ d-radio-group 参数
 |     name     |       `string`       |    --    | 可选，单选框的名称                                                                            | [竖向排列](#竖向排列)                                                 |
 |    values    |       `array`        |    --    | 可选，单选数据组                                                                              | [竖向排列](#竖向排列)                                                 |
 |   disabled   |      `boolean`       |  false   | 可选，是否禁用该选项组                                                                        | [radio-group 根据条件终止切换操作](#radio-group-根据条件终止切换操作) |
-|   cssStyle   |  `'row' / 'column'`  | 'column' | 可选，设置横向或纵向排列                                                                      | [横向排列](#横向排列)                                                 |
+|  direction   |  `'row' / 'column'`  | 'column' | 可选，设置横向或纵向排列                                                                      | [横向排列](#横向排列)                                                 |
 | beforeChange | `Function / Promise` |    --    | 可选，radio-group 切换前的回调函数，返回 boolean 类型，返回 false 可以阻止 radio-group 的切换 | [回调切换](#radio-group-根据条件终止切换操作)                         |
 
 d-radio-group 事件
diff --git a/packages/devui-vue/docs/components/time-axis/index.md b/packages/devui-vue/docs/components/time-axis/index.md
index 01ae74f482dfe6bdc1952a08eefef4a6b7f08c89..c3dd4bac86d4d2f45be89f88ac0fed464c29f0c2 100644
--- a/packages/devui-vue/docs/components/time-axis/index.md
+++ b/packages/devui-vue/docs/components/time-axis/index.md
@@ -14,7 +14,7 @@
 ```vue
 <template>
   <div>
-    <d-radio-group css-style="row" v-model="choose">
+    <d-radio-group direction="row" v-model="choose">
       <d-radio v-for="item in list" :key="item" :value="item">
         {{ item }}
       </d-radio>
diff --git a/packages/devui-vue/docs/en-US/components/radio/index.md b/packages/devui-vue/docs/en-US/components/radio/index.md
index 1a68221478a5e0ca1fcf15ac3c847de47b67010d..3ef024413a4b50b22e89c1017753e9edf9db1ba0 100644
--- a/packages/devui-vue/docs/en-US/components/radio/index.md
+++ b/packages/devui-vue/docs/en-US/components/radio/index.md
@@ -96,12 +96,12 @@ The second radio group is not allowed to jump.
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose" :beforeChange="beforeChange">
+  <d-radio-group direction="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-group v-model="choose2" direction="row" disabled>
     <d-radio v-for="item in list2" :key="item" :value="item">
       {{ item }}
     </d-radio>
@@ -178,7 +178,7 @@ export default defineComponent({
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="row" v-model="choose">
     <d-radio v-for="item in list" :key="item" :value="item">
       The Radio value is: {{ item }}
     </d-radio>
@@ -243,12 +243,12 @@ The array source can be a common array or an object array.
 
 ```vue
 <template>
-  <d-radio-group css-style="row" v-model="choose">
+  <d-radio-group direction="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-group direction="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>
@@ -303,7 +303,7 @@ d-radio-group Parameters
 |     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)                                 |
+|  direction   |  `'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