feat: ✨ Radio添加icon-placement属性用于控制图标方向 (#763)

✅ Closes: #371

docs/component/radio.md

@@ -150,7 +150,7 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
 ## RadioGroup Attributes
 
 | 参数           | 说明                        | 类型                      | 可选值               | 默认值  | 最低版本         |
-|-----|------|-----|-------|-------|--------|
+| -------------- | --------------------------- | ------------------------- | -------------------- | ------- | ---------------- |
 | v-model        | 会自动选中value对应的单选框 | string / number / boolean | -                    | -       | -                |
 | shape          | 单选框形状                  | string                    | dot / button / check | check   | -                |
 | size           | 设置大小                    | string                    | large                | -       | -                |
@@ -159,17 +159,18 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
 | max-width      | 文字位置最大宽度            | string                    | -                    | -       | -                |
 | inline         | 同行展示                    | boolean                   | -                    | false   | -                |
 | cell           | 表单模式                    | boolean                   | -                    | false   | -                |
+| icon-placement | 勾选图标对齐方式            | string                    | left / right/ auto   | auto    | $LOWEST_VERSION$ |
 
 ## RadioGroup Events
 
 | 事件名称 | 说明             | 参数        | 最低版本 |
-|---------|-----|-----|---------|
+| -------- | ---------------- | ----------- | -------- |
 | change   | 绑定值变化时触发 | `{ value }` | -        |
 
 ## Radio Attributes
 
 | 参数          | 说明                                          | 类型                      | 可选值               | 默认值  | 最低版本 |
-|-----|------|-----|-------|-------|---------|
+| ------------- | --------------------------------------------- | ------------------------- | -------------------- | ------- | -------- |
 | value         | 单选框选中时的值。会自动匹配radioGroup的value | string / number / boolean | -                    | -       | -        |
 | shape         | 单选框形状                                    | string                    | dot / button / check | check   | -        |
 | checked-color | 选中的颜色                                    | string                    | -                    | #4D80F0 | -        |

src/uni_modules/wot-design-uni/components/wd-radio-group/types.ts

@@ -1,5 +1,5 @@
 import { type InjectionKey } from 'vue'
-import type { RadioShape } from '../wd-radio/types'
+import type { RadioShape, RadioIconPlacement } from '../wd-radio/types'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type RadioGroupProvide = {
@@ -11,6 +11,7 @@ export type RadioGroupProvide = {
     cell?: boolean
     size?: string
     inline?: boolean
+    iconPlacement?: RadioIconPlacement
   }
   updateValue: (value: string | number | boolean) => void
 }
@@ -32,5 +33,7 @@ export const radioGroupProps = {
   /** 设置大小，默认为空 */
   size: makeStringProp(''),
   /** 同行展示，默认为 false */
-  inline: makeBooleanProp(false)
+  inline: makeBooleanProp(false),
+  /** 图标位置，默认为 left */
+  iconPlacement: makeStringProp<RadioIconPlacement>('auto')
 }

src/uni_modules/wot-design-uni/components/wd-radio/index.scss

@@ -172,6 +172,10 @@
     }
   }
 
+  &.icon-placement-left {
+    flex-direction: row-reverse;
+  }
+
   @include when(inline) {
     display: inline-block;
     margin-top: 0;
@@ -201,6 +205,14 @@
         }
       }
     }
+
+    &.icon-placement-right {
+      .wd-radio__shape {
+        margin-right: 0;
+        margin-left: 4px;
+        float: right;
+      }
+    }
   }
 
   @include when(disabled) {

src/uni_modules/wot-design-uni/components/wd-radio/types.ts

@@ -8,10 +8,12 @@
  * 记得注释
  */
 import type { PropType } from 'vue'
-import { baseProps, makeRequiredProp } from '../common/props'
+import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
 
 export type RadioShape = 'dot' | 'button' | 'check'
 
+export type RadioIconPlacement = 'left' | 'right' | 'auto'
+
 export const radioProps = {
   ...baseProps,
   /** 选中时的值 */
@@ -38,5 +40,10 @@ export const radioProps = {
     default: null
   },
   /** 最大宽度 */
-  maxWidth: String
+  maxWidth: String,
+  /** 图标位置，默认为 left */
+  iconPlacement: {
+    type: [String, null] as PropType<RadioIconPlacement>,
+    default: null
+  }
 }

src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue

@@ -4,7 +4,7 @@
       sizeValue ? 'is-' + sizeValue : ''
     } ${inlineValue ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${shapeValue !== 'check' ? 'is-' + shapeValue : ''} ${
       disabledValue ? 'is-disabled' : ''
-    } ${customClass}`"
+    } icon-placement-${iconPlacement} ${customClass}`"
     :style="customStyle"
     @click="handleClick"
   >
@@ -36,7 +36,7 @@ import wdIcon from '../wd-icon/wd-icon.vue'
 import { computed, watch } from 'vue'
 import { useParent } from '../composables/useParent'
 import { RADIO_GROUP_KEY } from '../wd-radio-group/types'
-import { radioProps } from './types'
+import { radioProps, type RadioIconPlacement } from './types'
 import { getPropByPath, isDef } from '../common/util'
 
 const props = defineProps(radioProps)
@@ -87,6 +87,14 @@ const cellValue = computed(() => {
   }
 })
 
+const iconPlacement = computed<RadioIconPlacement>(() => {
+  if (isDef(props.iconPlacement)) {
+    return props.iconPlacement
+  } else {
+    return getPropByPath(radioGroup, 'props.iconPlacement')
+  }
+})
+
 watch(
   () => props.shape,
   (newValue) => {