diff --git a/packages/devui-vue/devui/button/src/button-types.ts b/packages/devui-vue/devui/button/src/button-types.ts index 0479b6f5a6..772b0e1959 100644 --- a/packages/devui-vue/devui/button/src/button-types.ts +++ b/packages/devui-vue/devui/button/src/button-types.ts @@ -5,6 +5,7 @@ export type IButtonColor = 'secondary' | 'primary' | 'danger'; export type IButtonSize = 'lg' | 'md' | 'sm'; export type IButtonShape = 'round' | 'circle'; export type IButtonType = 'button' | 'submit' | 'reset'; +export type IButtonIconPos = 'left' | 'right'; export const buttonProps = { variant: { @@ -22,6 +23,10 @@ export const buttonProps = { type: String, default: '', }, + iconPos: { + type: String as PropType, + default: 'left', + }, loading: { type: Boolean, default: false, diff --git a/packages/devui-vue/devui/button/src/button.scss b/packages/devui-vue/devui/button/src/button.scss index f7bcd6fe45..d93d3ac7f4 100644 --- a/packages/devui-vue/devui/button/src/button.scss +++ b/packages/devui-vue/devui/button/src/button.scss @@ -337,7 +337,8 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px); } .#{$devui-prefix}-button { - transition: background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth, + transition: + background-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth, border-color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth, color $devui-animation-duration-slow $devui-animation-ease-in-out-smooth; white-space: nowrap; @@ -402,6 +403,10 @@ $devui-btn-lg-padding: var(--devui-btn-lg-padding, 0 24px); margin-right: 5px; } +.clear-left-5 { + margin-left: 5px; +} + .loading-icon__container { display: inline-flex; align-items: center; diff --git a/packages/devui-vue/devui/button/src/button.tsx b/packages/devui-vue/devui/button/src/button.tsx index f4794325af..46c1e9b142 100644 --- a/packages/devui-vue/devui/button/src/button.tsx +++ b/packages/devui-vue/devui/button/src/button.tsx @@ -14,7 +14,7 @@ export default defineComponent({ props: buttonProps, emits: ['click'], setup(props: ButtonProps, ctx: SetupContext) { - const { icon, disabled, loading, nativeType } = toRefs(props); + const { icon, iconPos, disabled, loading, nativeType } = toRefs(props); const { classes, iconClass } = useButton(props, ctx); const isMouseDown = ref(false); const showWave = ref(false); @@ -23,6 +23,10 @@ export default defineComponent({ left: '0px', }); + if (!['right', 'left'].includes(iconPos.value)) { + iconPos.value = 'left'; + } + const showClickWave = (e: MouseEvent) => { waveStyle.left = e.offsetX + 'px'; waveStyle.top = e.offsetY + 'px'; @@ -49,11 +53,16 @@ export default defineComponent({ type={nativeType.value} onMousedown={() => (isMouseDown.value = true)} onMouseup={() => (isMouseDown.value = false)}> - {icon.value && } + {iconPos.value === 'left' && icon.value && ( + + )}
{ctx.slots.default?.()} + {iconPos.value === 'right' && icon.value && ( + + )} {showWave.value &&
} ); diff --git a/packages/devui-vue/devui/button/src/use-button.ts b/packages/devui-vue/devui/button/src/use-button.ts index e3d53c1dc7..fbcaad5d68 100644 --- a/packages/devui-vue/devui/button/src/use-button.ts +++ b/packages/devui-vue/devui/button/src/use-button.ts @@ -36,7 +36,11 @@ export default function useButton(props: ButtonProps, ctx: SetupContext): UseBut } const origin = `${ns.e('icon-fix')} icon`; if (hasContent.value) { - return `${origin} clear-right-5`; + if (props.iconPos === 'left') { + return `${origin} clear-right-5`; + } else { + return `${origin} clear-left-5`; + } } else { return origin; } diff --git a/packages/devui-vue/docs/components/button/iconPos.vue b/packages/devui-vue/docs/components/button/iconPos.vue new file mode 100644 index 0000000000..5ad980386a --- /dev/null +++ b/packages/devui-vue/docs/components/button/iconPos.vue @@ -0,0 +1,23 @@ + + + diff --git a/packages/devui-vue/docs/components/button/index.md b/packages/devui-vue/docs/components/button/index.md index 1b47383b51..9bf8e8b7d1 100644 --- a/packages/devui-vue/docs/components/button/index.md +++ b/packages/devui-vue/docs/components/button/index.md @@ -54,6 +54,14 @@ button/icon ::: +### 图标位置 + +:::demo + +button/iconPos + +::: + ### 按钮组 将多个按钮作为一组放入按钮组容器中。按钮组可通过 size 设置尺寸，并与下拉菜单混合使用。 @@ -66,16 +74,17 @@ button/buttonGroup ### Button 参数 -| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | -| :------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ | -| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选，按钮形态 | [形态](#形态) | -| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选，按钮主题 | [主题色](#主题色) | -| size | [IButtonSize](#ibuttonsize) | 'md' | 可选，按钮尺寸 | [尺寸](#尺寸) | -| icon | `string` | -- | 可选，自定义按钮图标 | [图标按钮](#图标按钮) | -| shape | [IButtonShape](#ibuttonshape) | -- | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮) | -| disabled | `boolean` | false | 可选，是否禁用 button | [禁用状态](#禁用状态) | -| loading | `boolean` | false | 可选，设置加载中状态 | [加载中状态](#加载中状态) | -| native-type | [IButtonType](#ibuttontype) | 'button' | 可选，按钮原生type属性 | | +| 参数名 | 类型 | 默认 | 说明 | 跳转 Demo | +| :---------- | :-------------------------------- | :---------- | :------------------------ | :------------------------ | +| variant | [IButtonVariant](#ibuttonvariant) | 'outline' | 可选，按钮形态 | [形态](#形态) | +| color | [IButtonColor](#ibuttoncolor) | 'secondary' | 可选，按钮主题 | [主题色](#主题色) | +| size | [IButtonSize](#ibuttonsize) | 'md' | 可选，按钮尺寸 | [尺寸](#尺寸) | +| icon | `string` | -- | 可选，自定义按钮图标 | [图标按钮](#图标按钮) | +| iconPos | [IButtonIconPos](#ibuttoniconpos) | 'left' | 可选，自定义按钮图标位置 | [图标位置](#图标位置) | +| shape | [IButtonShape](#ibuttonshape) | -- | 可选，按钮形状(圆形/圆角) | [图标按钮](#图标按钮) | +| disabled | `boolean` | false | 可选，是否禁用 button | [禁用状态](#禁用状态) | +| loading | `boolean` | false | 可选，设置加载中状态 | [加载中状态](#加载中状态) | +| native-type | [IButtonType](#ibuttontype) | 'button' | 可选，按钮原生 type 属性 | | ### Button 类型定义 @@ -109,6 +118,12 @@ type IButtonShape = 'circle' | 'round'; type IButtonType = 'button' | 'submit' | 'reset'; ``` +#### IButtonIconPos + +```ts +type IButtonIconPos = 'left' | 'right'; +``` + ### ButtonGroup 参数 | 参数名 | 类型 | 默认 | 说明 | 跳转 Demo |