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

✅ Closes: #371
2025-12-06 17:18:40 +08:00 · 2024-12-07 18:40:49 +08:00 · 2024-12-07 18:40:49 +08:00 · b06a7a751b
commit b06a7a751b
parent ceb0ac027d
5 changed files with 56 additions and 25 deletions
--- a/docs/component/radio.md
+++ b/docs/component/radio.md
@ -149,28 +149,29 @@ radio设置的props优先级比radioGroup上设置的props优先级更高

 ## RadioGroup Attributes

-| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
-|-----|------|-----|-------|-------|--------|
-| v-model | 会自动选中value对应的单选框 | string / number / boolean | - | - | - |
-| shape | 单选框形状 | string | dot / button / check | check | - |
-| size | 设置大小 | string | large | - | - |
-| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
-| disabled | 禁用 | boolean | - | false | - |
-| max-width | 文字位置最大宽度 | string | - | - | - |
-| inline | 同行展示 | boolean | - | false | - |
-| cell | 表单模式 | boolean | - | false | - |
+| 参数           | 说明                        | 类型                      | 可选值               | 默认值  | 最低版本         |
+| -------------- | --------------------------- | ------------------------- | -------------------- | ------- | ---------------- |
+| v-model        | 会自动选中value对应的单选框 | string / number / boolean | -                    | -       | -                |
+| shape          | 单选框形状                  | string                    | dot / button / check | check   | -                |
+| size           | 设置大小                    | string                    | large                | -       | -                |
+| checked-color  | 选中的颜色                  | string                    | -                    | #4D80F0 | -                |
+| disabled       | 禁用                        | boolean                   | -                    | false   | -                |
+| max-width      | 文字位置最大宽度            | string                    | -                    | -       | -                |
+| inline         | 同行展示                    | boolean                   | -                    | false   | -                |
+| cell           | 表单模式                    | boolean                   | -                    | false   | -                |
+| icon-placement | 勾选图标对齐方式            | string                    | left / right/ auto   | auto    | $LOWEST_VERSION$ |

 ## RadioGroup Events

-| 事件名称 | 说明 | 参数 | 最低版本 |
-|---------|-----|-----|---------|
-| change | 绑定值变化时触发 | `{ value }`  | - |
+| 事件名称 | 说明             | 参数        | 最低版本 |
+| -------- | ---------------- | ----------- | -------- |
+| change   | 绑定值变化时触发 | `{ value }` | -        |

 ## Radio Attributes

-| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
-|-----|------|-----|-------|-------|---------|
-| value | 单选框选中时的值。会自动匹配radioGroup的value | string / number / boolean | - | - | - |
-| shape | 单选框形状 | string | dot / button / check | check | - |
-| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
-| disabled | 禁用 | boolean | - | false | - |
+| 参数          | 说明                                          | 类型                      | 可选值               | 默认值  | 最低版本 |
+| ------------- | --------------------------------------------- | ------------------------- | -------------------- | ------- | -------- |
+| value         | 单选框选中时的值。会自动匹配radioGroup的value | string / number / boolean | -                    | -       | -        |
+| shape         | 单选框形状                                    | string                    | dot / button / check | check   | -        |
+| checked-color | 选中的颜色                                    | string                    | -                    | #4D80F0 | -        |
+| disabled      | 禁用                                          | boolean                   | -                    | false   | -        |
--- a/src/uni_modules/wot-design-uni/components/wd-radio-group/types.ts
+++ b/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')
 }
--- a/src/uni_modules/wot-design-uni/components/wd-radio/index.scss
+++ b/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) {
--- a/src/uni_modules/wot-design-uni/components/wd-radio/types.ts
+++ b/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
+  }
 }
--- a/src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue
+++ b/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) => {