feat(cell): add props center

src/packages/__VUE/cell/demo.vue

@@ -41,6 +41,9 @@
     <nut-cell :title="translate('name')" icon="my" :desc="translate('desc')" isLink> </nut-cell>
     <h2>{{ translate('title6') }}</h2>
     <nut-cell desc-text-align="left" :desc="translate('desc')"></nut-cell>
+
+    <h2>{{ translate('title7') }}</h2>
+    <nut-cell center :title="translate('title')" :sub-title="translate('title1')" :desc="translate('desc')"></nut-cell>
   </div>
 </template>
 
@@ -61,6 +64,7 @@ useTranslate({
     title4: '圆角设置 0',
     title5: '链接 | 分组用法',
     title6: '只展示 desc ，可通过 desc-text-align 调整内容位置',
+    title7: '垂直居中',
     link: '链接',
     urlJump: 'URL 跳转',
     routerJump: '路由跳转 ’/‘ ',
@@ -82,6 +86,7 @@ useTranslate({
     title4: 'Round Radius 0',
     title5: 'Link | CellGroup Usage',
     title6: 'Only display desc , you can adjust the content position through desc-text-align',
+    title7: 'Vertical Center',
     link: 'Link',
     urlJump: 'URL Jump',
     routerJump: 'Router Jump ’/‘ ',

src/packages/__VUE/cell/doc.en-US.md

@@ -144,6 +144,18 @@ app.use(Cell).use(CellGroup).use(Icon);
 </template>
 ```
 
+### Vertical Center
+
+You can center the left and right contents of the cell vertically through the 'center' attribute.
+
+:::demo
+
+```html
+<template>
+  <nut-cell center title="Title" sub-title="Subtitle Description" desc="Desc"></nut-cell>
+</template>
+```
+
 :::
 
 ## API
@@ -169,6 +181,7 @@ app.use(Cell).use(CellGroup).use(Icon);
 | url             | Link URL                                                                                                 | String           | -       |
 | to              | Target route of the link, same as to of vue-router                                                       | String ｜ Object | -       |
 | replace         | If true, the navigation will not leave a history record                                                  | Boolean          | false   |
+| center`v3.1.21` | Whether to center content vertically                                                                     | Boolean          | false   |
 
 ### Cell Event
 

src/packages/__VUE/cell/doc.md

@@ -146,20 +146,33 @@ app.use(Cell).use(CellGroup).use(Icon);
 ```
 
 :::
+### 垂直居中
+
+通过 `center` 属性可以让 Cell 的左右内容都垂直居中。
+
+:::demo
+
+```html
+<template>
+  <nut-cell center title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
+</template>
+```
+
+:::
 
 ## API
 
 ### CellGroup Prop
 
 | 字段  | 说明     | 类型   | 默认值 |
-| ----- | -------- | ------ | ------ |
+|-------|----------|--------|--------|
 | title | 分组标题 | String | -      |
 | desc  | 分组描述 | String | -      |
 
 ### Cell Prop
 
 | 字段                   | 说明                                                                                           | 类型             | 默认值 |
-| ---------------------- | ---------------------------------------------------------------------------------------------- | ---------------- | ------ |
+|------------------------|------------------------------------------------------------------------------------------------|------------------|--------|
 | title                  | 标题名称                                                                                       | String           | -      |
 | sub-title              | 左侧副标题                                                                                     | String           | -      |
 | desc                   | 右侧描述                                                                                       | String           | -      |
@@ -170,17 +183,18 @@ app.use(Cell).use(CellGroup).use(Icon);
 | url `小程序不支持`     | 点击后跳转的链接地址                                                                           | String           | -      |
 | to `小程序不支持`      | 点击后跳转的目标路由对象，同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) 属性 | String ｜ Object | -      |
 | replace `小程序不支持` | 是否在跳转时替换当前页面历史                                                                   | Boolean          | false  |
+| center`v3.1.21`        | 是否使内容垂直居中                                                                             | Boolean          | false  |
 
 ### Cell Event
 
 | 名称  | 说明     | 回调参数    |
-| ----- | -------- | ----------- |
+|-------|----------|-------------|
 | click | 点击事件 | event:Event |
 
 ## Cell Slots
 
 | 名称          | 说明                 |
-| ------------- | -------------------- |
+|---------------|----------------------|
 | icon `v3.1.4` | 自定义左侧`icon`区域 |
 | default       | 自定义内容           |
 | link          | 自定义右侧`link`区域 |
@@ -188,6 +202,6 @@ app.use(Cell).use(CellGroup).use(Icon);
 ## CellGroup Slots
 
 | 名称            | 说明                  |
-| --------------- | --------------------- |
+|-----------------|-----------------------|
 | title `v3.1.10` | 自定义`title`标题区域 |
 | desc `v3.1.12`  | 自定义`desc`描述区域  |

src/packages/__VUE/cell/index.scss

@@ -12,6 +12,10 @@
   margin: 10px 0;
   box-sizing: border-box;
 
+  &--center {
+    align-items: center;
+  }
+
   &:last-child {
     &::after {
       border: 0 !important;

src/packages/__VUE/cell/index.taro.vue

@@ -39,7 +39,8 @@ export default create({
     replace: { type: Boolean, default: false },
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
-    icon: { type: String, default: '' }
+    icon: { type: String, default: '' },
+    center: { type: Boolean, default: false }
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -47,7 +48,8 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--clickable`]: props.isLink || props.to
+        [`${prefixCls}--clickable`]: props.isLink || props.to,
+        [`${prefixCls}--center`]: props.center
       };
     });
 

src/packages/__VUE/cell/index.vue

@@ -39,7 +39,8 @@ export default create({
     replace: { type: Boolean, default: false },
     roundRadius: { type: [String, Number], default: '' },
     url: { type: String, default: '' },
-    icon: { type: String, default: '' }
+    icon: { type: String, default: '' },
+    center: { type: Boolean, default: false }
   },
   emits: ['click'],
   setup(props, { emit }) {
@@ -47,7 +48,8 @@ export default create({
       const prefixCls = componentName;
       return {
         [prefixCls]: true,
-        [`${prefixCls}--clickable`]: props.isLink || props.to
+        [`${prefixCls}--clickable`]: props.isLink || props.to,
+        [`${prefixCls}--center`]: props.center
       };
     });
     const router = useRouter();

src/sites/mobile-taro/vue/src/base/pages/cell/index.vue

@@ -45,6 +45,8 @@
     <nut-cell title="姓名" icon="my" desc="张三" isLink> </nut-cell>
     <h2>只展示 desc ，可通过 desc-text-align 调整内容位置</h2>
     <nut-cell desc-text-align="left" desc="张三"></nut-cell>
+    <h2>垂直居中</h2>
+    <nut-cell center title="我是标题" sub-title="副标题描述" desc="描述文字"></nut-cell>
   </div>
 </template>