feat(Cell): allow to disable clickable when using is-link (#7923)

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` |

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` |

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<string, boolean | undefined> = {
         center,

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');
+});