feat(Cell): add tag prop (#11139)

packages/vant/src/cell/Cell.tsx

@@ -12,6 +12,7 @@ import {
   truthProp,
   unknownProp,
   numericProp,
+  makeStringProp,
   createNamespace,
 } from '../utils';
 
@@ -28,6 +29,7 @@ export type CellSize = 'normal' | 'large';
 export type CellArrowDirection = 'up' | 'down' | 'left' | 'right';
 
 export const cellSharedProps = {
+  tag: makeStringProp<keyof HTMLElementTagNameMap>('div'),
   icon: String,
   size: String as PropType<CellSize>,
   title: numericProp,
@@ -131,7 +133,7 @@ export default defineComponent({
     };
 
     return () => {
-      const { size, center, border, isLink, required } = props;
+      const { tag, size, center, border, isLink, required } = props;
       const clickable = props.clickable ?? isLink;
 
       const classes: Record<string, boolean | undefined> = {
@@ -145,7 +147,7 @@ export default defineComponent({
       }
 
       return (
-        <div
+        <tag
           class={bem(classes)}
           role={clickable ? 'button' : undefined}
           tabindex={clickable ? 0 : undefined}
@@ -156,7 +158,7 @@ export default defineComponent({
           {renderValue()}
           {renderRightIcon()}
           {slots.extra?.()}
-        </div>
+        </tag>
       );
     };
   },

packages/vant/src/cell/README.md

@@ -154,11 +154,12 @@ app.use(CellGroup);
 | size | Size, can be set to `large` | _string_ | - |
 | icon | Left Icon | _string_ | - |
 | icon-prefix | Icon className prefix | _string_ | `van-icon` |
-| border | Whether to show inner border | _boolean_ | `true` |
-| center | Whether to center content vertically | _boolean_ | `false` |
+| tag | Custom element tag | _string_ | `div` |
 | 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` |
+| border | Whether to show inner border | _boolean_ | `true` |
+| center | Whether to center content vertically | _boolean_ | `false` |
 | clickable | Whether to show click feedback when clicked | _boolean_ | `null` |
 | is-link | Whether to show link icon | _boolean_ | `false` |
 | required | Whether to show required mark | _boolean_ | `false` |

packages/vant/src/cell/README.zh-CN.md

@@ -159,6 +159,7 @@ app.use(CellGroup);
 | size | 单元格大小，可选值为 `large` | _string_ | - |
 | icon | 左侧图标名称或图片链接，等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
 | icon-prefix | 图标类名前缀，等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
+| tag | 根节点对应的 HTML 标签名 | _string_ | `div` |
 | url | 点击后跳转的链接地址 | _string_ | - |
 | to | 点击后跳转的目标路由对象，等同于 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - |
 | border | 是否显示内边框 | _boolean_ | `true` |

packages/vant/src/cell/test/__snapshots__/index.spec.ts.snap

@@ -37,6 +37,11 @@ exports[`should render label slot correctly 1`] = `
 </div>
 `;
 
+exports[`should render tag prop correctly 1`] = `
+<a class="van-cell">
+</a>
+`;
+
 exports[`should render title slot correctly 1`] = `
 <div class="van-cell">
   <div class="van-cell__title">

packages/vant/src/cell/test/index.spec.ts

@@ -85,7 +85,7 @@ test('should change icon class prefix when using icon-prefix prop', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
-test('should allow to disable clicakble when using is-link prop', () => {
+test('should allow to disable clickable when using is-link prop', () => {
   const wrapper = mount(Cell, {
     props: {
       isLink: true,
@@ -94,3 +94,12 @@ test('should allow to disable clicakble when using is-link prop', () => {
   });
   expect(wrapper.classes()).not.toContain('van-cell--clickable');
 });
+
+test('should render tag prop correctly', () => {
+  const wrapper = mount(Cell, {
+    props: {
+      tag: 'a',
+    },
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});