feat(Form): 支持设置必填星号的位置

DevCloudFE · Apr 29, 2024 · b5df719 · b5df719
1 parent c4cf9b7
commit b5df719
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 7 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -16,6 +16,7 @@ export type LabelAlign = 'start' | 'center' | 'end';
 export type FormData = Record<string, unknown>;
 export type StyleType = 'default' | 'gray';
 export type AppendToBodyScrollStrategy = 'close' | 'reposition';
+export type RequirePosition = 'left' | 'right';
 
 export type FormRules = Partial<Record<string, Array<FormRuleItem>>>;
 export interface ValidateFailure {
@@ -78,6 +79,10 @@ export const formProps = {
     type: String as PropType<AppendToBodyScrollStrategy>,
     default: 'reposition',
   },
+  requirePosition: {
+    type: String as PropType<RequirePosition>,
+    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
@@ -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 事件