Skip to content

Commit b06a7a7

Browse files
RJQingHuanRJQingHuan
authored
feat: ✨ Radio添加icon-placement属性用于控制图标方向 (#763)
✅ Closes: #371
1 parent ceb0ac0 commit b06a7a7

File tree

5 files changed

+56
-25
lines changed

5 files changed

+56
-25
lines changed

‎docs/component/radio.md‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -149,28 +149,29 @@ radio设置的props优先级比radioGroup上设置的props优先级更高
149149

150150
## RadioGroup Attributes
151151

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

163164
## RadioGroup Events
164165

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

169170
## Radio Attributes
170171

171-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
172-
|-----|------|-----|-------|-------|---------|
173-
| value | 单选框选中时的值。会自动匹配radioGroup的value | string / number / boolean | - | - | - |
174-
| shape | 单选框形状 | string | dot / button / check | check | - |
175-
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
176-
| disabled | 禁用 | boolean | - | false | - |
172+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
173+
| ------------- | --------------------------------------------- | ------------------------- | -------------------- | ------- | -------- |
174+
| value | 单选框选中时的值。会自动匹配radioGroup的value | string / number / boolean | - | - | - |
175+
| shape | 单选框形状 | string | dot / button / check | check | - |
176+
| checked-color | 选中的颜色 | string | - | #4D80F0 | - |
177+
| disabled | 禁用 | boolean | - | false | - |

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { type InjectionKey } from 'vue'
2-
import type { RadioShape } from '../wd-radio/types'
2+
import type { RadioShape, RadioIconPlacement } from '../wd-radio/types'
33
import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
44

55
export type RadioGroupProvide = {
@@ -11,6 +11,7 @@ export type RadioGroupProvide = {
1111
cell?: boolean
1212
size?: string
1313
inline?: boolean
14+
iconPlacement?: RadioIconPlacement
1415
}
1516
updateValue: (value: string | number | boolean) => void
1617
}
@@ -32,5 +33,7 @@ export const radioGroupProps = {
3233
/** 设置大小，默认为空 */
3334
size: makeStringProp(''),
3435
/** 同行展示，默认为 false */
35-
inline: makeBooleanProp(false)
36+
inline: makeBooleanProp(false),
37+
/** 图标位置，默认为 left */
38+
iconPlacement: makeStringProp<RadioIconPlacement>('auto')
3639
}

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,10 @@
172172
}
173173
}
174174

175+
&.icon-placement-left {
176+
flex-direction: row-reverse;
177+
}
178+
175179
@include when(inline) {
176180
display: inline-block;
177181
margin-top: 0;
@@ -201,6 +205,14 @@
201205
}
202206
}
203207
}
208+
209+
&.icon-placement-right {
210+
.wd-radio__shape {
211+
margin-right: 0;
212+
margin-left: 4px;
213+
float: right;
214+
}
215+
}
204216
}
205217

206218
@include when(disabled) {

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@
88
* 记得注释
99
*/
1010
import type { PropType } from 'vue'
11-
import { baseProps, makeRequiredProp } from '../common/props'
11+
import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
1212

1313
export type RadioShape = 'dot' | 'button' | 'check'
1414

15+
export type RadioIconPlacement = 'left' | 'right' | 'auto'
16+
1517
export const radioProps = {
1618
...baseProps,
1719
/** 选中时的值 */
@@ -38,5 +40,10 @@ export const radioProps = {
3840
default: null
3941
},
4042
/** 最大宽度 */
41-
maxWidth: String
43+
maxWidth: String,
44+
/** 图标位置，默认为 left */
45+
iconPlacement: {
46+
type: [String, null] as PropType<RadioIconPlacement>,
47+
default: null
48+
}
4249
}

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
sizeValue ? 'is-' + sizeValue : ''
55
} ${inlineValue ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${shapeValue !== 'check' ? 'is-' + shapeValue : ''} ${
66
disabledValue ? 'is-disabled' : ''
7-
} ${customClass}`"
7+
} icon-placement-${iconPlacement} ${customClass}`"
88
:style="customStyle"
99
@click="handleClick"
1010
>
@@ -36,7 +36,7 @@ import wdIcon from '../wd-icon/wd-icon.vue'
3636
import { computed, watch } from 'vue'
3737
import { useParent } from '../composables/useParent'
3838
import { RADIO_GROUP_KEY } from '../wd-radio-group/types'
39-
import { radioProps } from './types'
39+
import { radioProps, type RadioIconPlacement } from './types'
4040
import { getPropByPath, isDef } from '../common/util'
4141

4242
const props = defineProps(radioProps)
@@ -87,6 +87,14 @@ const cellValue = computed(() => {
8787
}
8888
})
8989

90+
const iconPlacement = computed<RadioIconPlacement>(() => {
91+
if (isDef(props.iconPlacement)) {
92+
return props.iconPlacement
93+
} else {
94+
return getPropByPath(radioGroup, 'props.iconPlacement')
95+
}
96+
})
97+
9098
watch(
9199
() => props.shape,
92100
(newValue) => {

0 commit comments

Comments
 (0)