diff --git a/packages/vant/src/cell/Cell.tsx b/packages/vant/src/cell/Cell.tsx index c93d86bba..e3a3b3d4d 100644 --- a/packages/vant/src/cell/Cell.tsx +++ b/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('div'), icon: String, size: String as PropType, 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 = { @@ -145,7 +147,7 @@ export default defineComponent({ } return ( -
+ ); }; }, diff --git a/packages/vant/src/cell/README.md b/packages/vant/src/cell/README.md index a90f5ff78..a880a462f 100644 --- a/packages/vant/src/cell/README.md +++ b/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` | diff --git a/packages/vant/src/cell/README.zh-CN.md b/packages/vant/src/cell/README.zh-CN.md index 58e767d7f..302f80d38 100644 --- a/packages/vant/src/cell/README.zh-CN.md +++ b/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` | diff --git a/packages/vant/src/cell/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cell/test/__snapshots__/index.spec.ts.snap index 0e8d8a80a..52675f487 100644 --- a/packages/vant/src/cell/test/__snapshots__/index.spec.ts.snap +++ b/packages/vant/src/cell/test/__snapshots__/index.spec.ts.snap @@ -37,6 +37,11 @@ exports[`should render label slot correctly 1`] = `
`; +exports[`should render tag prop correctly 1`] = ` + + +`; + exports[`should render title slot correctly 1`] = `
diff --git a/packages/vant/src/cell/test/index.spec.ts b/packages/vant/src/cell/test/index.spec.ts index ecff12cdc..58d4d8f89 100644 --- a/packages/vant/src/cell/test/index.spec.ts +++ b/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(); +});