feat(Cell): 单元格增加标题垂直居中功能

D-xuanmo · May 25, 2024 · 998ae96 · 998ae96
1 parent 46ae159
commit 998ae96
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/docs/src/pages/components/common/cell.md b/docs/src/pages/components/common/cell.md
@@ -79,6 +79,7 @@ import { TipsOutlined, CloseOutlined } from '@xuanmo/dl-icons'
 |title-width|`string`|`80px`|标题宽度|N|
 |title-class|`string`|-|标题类名|N|
 |title-align|`string`|`left`|标题对齐方式，可选值：`left/center/right`|N|
+|title-vertical-center|`boolean`|`false`|标题垂直居中|N|
 |hide-title|`boolean`|`false`|是否隐藏标题|N|
 |required|`boolean`|`false`|是否显示必填标识|N|
 |content|`string`|-|内容|N|

diff --git a/packages/dl-common/src/cell/cell.tsx b/packages/dl-common/src/cell/cell.tsx
@@ -33,7 +33,8 @@ export default defineComponent({
     return () => {
       const titleClassName = [
         bem('title', {
-          [props.titleAlign]: props.titleAlign
+          [props.titleAlign]: props.titleAlign,
+          'title-vertical-center': props.titleVerticalCenter
         }),
         props.titleClass
       ]

diff --git a/packages/dl-common/src/cell/demo/index.vue b/packages/dl-common/src/cell/demo/index.vue
@@ -6,6 +6,7 @@
     suffix="后缀"
     arrow
     required
+    client-type="PC"
   >
     <template #left-icon>
       <tips-outlined size="small" color="#f00" />
@@ -21,6 +22,7 @@
     suffix="后缀"
     arrow
     required
+    client-type="PC"
     layout="vertical"
   >
     <template #left-icon>

diff --git a/packages/dl-common/src/cell/props.ts b/packages/dl-common/src/cell/props.ts
@@ -13,6 +13,13 @@ export const CELL_PROPS = {
     type: String as PropType<HorizontalAlignType>,
     default: 'left'
   },
+  /**
+   * 标题垂直居中
+   */
+  titleVerticalCenter: {
+    type: Boolean,
+    default: false
+  },
   hideTitle: Boolean,
   required: Boolean,
   content: String as PropType<string | undefined>,

diff --git a/packages/dl-common/src/cell/style.scss b/packages/dl-common/src/cell/style.scss
@@ -130,12 +130,17 @@
         vertical-align: middle;
       }
     }
+
+    &--title-vertical-center {
+      align-self: center;
+    }
   }
 
   &__content {
     flex: 1;
     display: flex;
     flex-wrap: wrap;
+    align-items: center;
     @include text-align;
 
     #{$parent} {

diff --git a/packages/dl-common/src/form/components/form-item.vue b/packages/dl-common/src/form/components/form-item.vue
@@ -1,16 +1,17 @@
 <template>
   <d-cell
     v-if="model.dataKey && model.layout.container !== false"
-    :class="itemClassName"
     content-align="left"
-    :title-width="formProps.labelWidth"
-    :layout="model.layout.layout || formProps.layout"
-    :hide-title="formProps.hideLabel || model.hideLabel"
+    :class="itemClassName"
     :colon="formProps.colon"
     :round="formProps.round"
     :border="formProps.border"
-    :client-type="formProps.clientType"
     :description="model.description"
+    :title-width="formProps.labelWidth"
+    :client-type="formProps.clientType"
+    :layout="model.layout.layout || formProps.layout"
+    :hide-title="formProps.hideLabel || model.hideLabel"
+    :title-vertical-center="model.layout.titleVerticalCenter"
   >
     <template #title>
       <span