[Improvement] ContactCard add 'editable' prop (#435)

docs/demos/common.js

@@ -47,6 +47,7 @@ Locale.add({
     custom: '自定义',
     loading: '加载状态',
     disabled: '禁用状态',
+    uneditable: '不可编辑',
     basicUsage: '基础用法',
     advancedUsage: '高级用法'
   },
@@ -67,6 +68,7 @@ Locale.add({
     custom: 'Custom',
     loading: 'Loading',
     disabled: 'Disabled',
+    uneditable: 'Uneditable',
     basicUsage: 'Basic Usage',
     advancedUsage: 'Advanced Usage'
   }

docs/demos/views/contact.vue

@@ -27,6 +27,15 @@
         />
       </van-popup>
     </demo-block>
+
+    <demo-block :title="$t('uneditable')">
+      <van-contact-card
+        type="edit"
+        :name="list[0].name"
+        :tel="list[0].tel"
+        :editable="false"
+      />
+    </demo-block>
   </demo-section>
 </template>
 

docs/markdown/en-US/contact.md

@@ -119,6 +119,17 @@ export default {
 };
 ```
 
+#### Uneditable
+
+```html
+<van-contact-card
+  type="edit"
+  name="张三"
+  tel="13000000000"
+  :editable="false"
+/>
+```
+
 
 ### ContactCard API
 | Attribute | Description | Type | Default | Accepted Values |

docs/markdown/zh-CN/contact.md

@@ -118,6 +118,17 @@ export default {
 };
 ```
 
+#### 不可编辑
+
+```html
+<van-contact-card
+  type="edit"
+  name="张三"
+  tel="13000000000"
+  :editable="false"
+/>
+```
+
 
 ### ContactCard API
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |

packages/contact-card/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-contact-card" :class="`van-contact-card--${type}`" v-on="$listeners">
+  <div class="van-contact-card" :class="[`van-contact-card--${type}`, { 'van-contact-card--uneditable': !editable }]" @click="onClick">
     <div class="van-contact-card__content">
       <template v-if="type === 'add'">
         <icon class="van-contact-card__icon" name="add2" />
@@ -13,7 +13,7 @@
         </div>
       </template>
     </div>
-    <icon class="van-contact-card__arrow" name="arrow" />
+    <icon v-if="editable" class="van-contact-card__arrow" name="arrow" />
   </div>
 </template>
 
@@ -27,10 +27,22 @@ export default create({
     tel: String,
     name: String,
     addText: String,
+    editable: {
+      type: Boolean,
+      default: true
+    },
     type: {
       type: String,
       default: 'add'
     }
+  },
+
+  methods: {
+    onClick(event) {
+      if (this.editable) {
+        this.$emit('click', event);
+      }
+    }
   }
 });
 </script>

packages/vant-css/src/contact-card.css

@@ -8,6 +8,12 @@
     background-color: $active-color;
   }
 
+  &--uneditable {
+    &:active {
+      background-color: $white;
+    }
+  }
+
   &--add {
     line-height: 40px;