diff --git a/src/cell/README.md b/src/cell/README.md index ffc45cf41..be74c41d9 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -143,7 +143,7 @@ app.use(CellGroup); | 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` | -| clickable | Whether to show click feedback when clicked | _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` | | arrow-direction | Can be set to `left` `up` `down` | _string_ | `right` | diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 408396d3c..760fdd555 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -149,7 +149,7 @@ app.use(CellGroup); | to | 点击后跳转的目标路由对象,同 vue-router 的 [to 属性](https://router.vuejs.org/zh/api/#to) | _string \| object_ | - | | border | 是否显示内边框 | _boolean_ | `true` | | replace | 是否在跳转时替换当前页面历史 | _boolean_ | `false` | -| clickable | 是否开启点击反馈 | _boolean_ | `false` | +| clickable | 是否开启点击反馈 | _boolean_ | `null` | | is-link | 是否展示右侧箭头并开启点击反馈 | _boolean_ | `false` | | required | 是否显示表单必填星号 | _boolean_ | `false` | | center | 是否使内容垂直居中 | _boolean_ | `false` | diff --git a/src/cell/index.tsx b/src/cell/index.tsx index 67ea61fe3..5918df258 100644 --- a/src/cell/index.tsx +++ b/src/cell/index.tsx @@ -22,7 +22,6 @@ export const cellProps = { center: Boolean, isLink: Boolean, required: Boolean, - clickable: Boolean, iconPrefix: String, titleStyle: null as any, titleClass: null as any, @@ -33,6 +32,10 @@ export const cellProps = { type: Boolean, default: true, }, + clickable: { + type: Boolean, + default: null, + }, }; export default createComponent({ @@ -114,7 +117,7 @@ export default createComponent({ return () => { const { size, center, border, isLink, required } = props; - const clickable = isLink || props.clickable; + const clickable = props.clickable ?? isLink; const classes: Record = { center, diff --git a/src/cell/test/index.spec.js b/src/cell/test/index.spec.js index cee456065..9da699b6b 100644 --- a/src/cell/test/index.spec.js +++ b/src/cell/test/index.spec.js @@ -83,3 +83,13 @@ 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', () => { + const wrapper = mount(Cell, { + props: { + isLink: true, + clickable: false, + }, + }); + expect(wrapper.classes()).not.toContain('van-cell--clickable'); +});