diff --git a/packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts b/packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts index 856e2d422e..e6aa9d9390 100644 --- a/packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts +++ b/packages/devui-vue/devui/form/src/components/form-item/form-item-types.ts @@ -1,6 +1,6 @@ import type { RuleItem, ValidateFieldsError } from 'async-validator'; -import type { ComputedRef, ExtractPropTypes, PropType, InjectionKey, Ref, SetupContext } from 'vue'; -import { LabelAlign, LabelSize, Layout } from '../../form-types'; +import type { ComputedRef, ExtractPropTypes, PropType, Ref, SetupContext } from 'vue'; +import { LabelAlign, LabelSize, Layout, RequirePosition } from '../../form-types'; import { FeedbackStatus } from '../form-control/form-control-types'; export type FormItemValidateState = '' | 'error' | 'pending' | 'success'; @@ -81,6 +81,7 @@ export type LabelData = ComputedRef<{ layout: Layout; labelSize: LabelSize; labelAlign: LabelAlign; + requiredPosition: RequirePosition; helpTips: string | HelpTips; formItemCtx: SetupContext; }>; diff --git a/packages/devui-vue/devui/form/src/components/form-item/form-item.tsx b/packages/devui-vue/devui/form/src/components/form-item/form-item.tsx index d31610c23d..959ed30992 100644 --- a/packages/devui-vue/devui/form/src/components/form-item/form-item.tsx +++ b/packages/devui-vue/devui/form/src/components/form-item/form-item.tsx @@ -24,6 +24,7 @@ export default defineComponent({ layout: formContext.layout, labelSize: formContext.labelSize, labelAlign: formContext.labelAlign, + requiredPosition: formContext.requirePosition, helpTips: helpTips.value, formItemCtx: ctx, })); diff --git a/packages/devui-vue/devui/form/src/components/form-label/form-label.scss b/packages/devui-vue/devui/form/src/components/form-label/form-label.scss index 413c97ef3c..2f465205bd 100644 --- a/packages/devui-vue/devui/form/src/components/form-label/form-label.scss +++ b/packages/devui-vue/devui/form/src/components/form-label/form-label.scss @@ -47,11 +47,21 @@ margin-right: 8px; margin-left: -12px; } +} + +.#{$devui-prefix}-form__label--required-right { + &::after { + content: '*'; + color: red; + display: inline-block; + margin-left: 8px; + } +} - &-hide { - &::before { - display: none; - } +.#{$devui-prefix}-form__label--required-hide { + &::before, + &::after { + display: none; } } diff --git a/packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts b/packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts index fa9a45f08f..ecc5782d26 100644 --- a/packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts +++ b/packages/devui-vue/devui/form/src/components/form-label/use-form-label.ts @@ -25,7 +25,8 @@ export function useFormLabel() { const labelInnerClasses = computed(() => ({ [`${ns.e('label-span')}`]: true, - [`${ns.em('label', 'required')}`]: formItemContext.isRequired, + [`${ns.em('label', 'required')}`]: formItemContext.isRequired && labelData.value.requiredPosition === 'left', + [`${ns.em('label', 'required-right')}`]: formItemContext.isRequired && labelData.value.requiredPosition === 'right', [`${ns.em('label', 'required-hide')}`]: formItemContext.isRequired && formContext.hideRequiredMark, })); diff --git a/packages/devui-vue/devui/form/src/form-types.ts b/packages/devui-vue/devui/form/src/form-types.ts index 5e87bd5de7..e048378425 100644 --- a/packages/devui-vue/devui/form/src/form-types.ts +++ b/packages/devui-vue/devui/form/src/form-types.ts @@ -16,6 +16,7 @@ export type LabelAlign = 'start' | 'center' | 'end'; export type FormData = Record; export type StyleType = 'default' | 'gray'; export type AppendToBodyScrollStrategy = 'close' | 'reposition'; +export type RequirePosition = 'left' | 'right'; export type FormRules = Partial>>; export interface ValidateFailure { @@ -78,6 +79,10 @@ export const formProps = { type: String as PropType, default: 'reposition', }, + requirePosition: { + type: String as PropType, + default: 'left', + }, } as const; export interface UseFieldCollection { diff --git a/packages/devui-vue/docs/components/form/index.md b/packages/devui-vue/docs/components/form/index.md index fcc57064b9..4df15edd0b 100644 --- a/packages/devui-vue/docs/components/form/index.md +++ b/packages/devui-vue/docs/components/form/index.md @@ -666,6 +666,7 @@ export default defineComponent({ | hide-required-mark | `boolean` | false | 可选,是否隐藏所有表单项的必选标记 | | | style-type | [StyleType](#styletype) | 'default' | 可选,设置表单为灰色表单 | | | append-to-body-scroll-strategy | [AppendToBodyScrollStrategy](#appendtobodyscrollstrategy) | 'reposition' | 可选,消息显示为 popover 时,滚动时 popover 处理策略,默认策略跟随宿主移动;`close`为滚动时关闭 | | +|require-position|`string`|'left'|可选,必填型号的位置,可选值为`left`和`right`|| ### Form 事件