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

src/cell/README.md

@@ -142,7 +142,7 @@ Vue.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

@@ -148,7 +148,7 @@ Vue.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

@@ -112,7 +112,7 @@ function Cell(
     functionalRoute(ctx);
   }
 
-  const clickable = isLink || props.clickable;
+  const clickable = props.clickable ?? isLink;
 
   const classes: Mods = {
     clickable,

src/cell/shared.ts

@@ -23,7 +23,6 @@ export const cellProps = {
   center: Boolean,
   isLink: Boolean,
   required: Boolean,
-  clickable: Boolean,
   iconPrefix: String,
   titleStyle: null as any,
   titleClass: null as any,
@@ -37,4 +36,8 @@ export const cellProps = {
     type: Boolean,
     default: true,
   },
+  clickable: {
+    type: Boolean,
+    default: null,
+  },
 };

src/cell/test/index.spec.js

@@ -78,3 +78,16 @@ test('icon-prefix prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('should allow to disable clickable when using is-link prop', () => {
+  const wrapper = mount(Cell, {
+    propsData: {
+      isLink: true,
+      clickable: false,
+    },
+  });
+
+  expect(
+    wrapper.element.classList.contains('.van-cell--clickable')
+  ).toBeFalsy();
+});