From 5a96838326df1dc399f4c5bc2db6b2334c5943e4 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Thu, 14 Dec 2017 14:44:27 +0800
Subject: [PATCH] [Improvement] ContactCard add 'editable' prop (#435)

---
 docs/demos/common.js                   |  2 ++
 docs/demos/views/contact.vue           |  9 +++++++++
 docs/markdown/en-US/contact.md         | 11 +++++++++++
 docs/markdown/zh-CN/contact.md         | 11 +++++++++++
 packages/contact-card/index.vue        | 16 ++++++++++++++--
 packages/vant-css/src/contact-card.css |  6 ++++++
 6 files changed, 53 insertions(+), 2 deletions(-)

diff --git a/docs/demos/common.js b/docs/demos/common.js
index 26a723934..0ad3d5a11 100644
--- a/docs/demos/common.js
+++ b/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'
   }
diff --git a/docs/demos/views/contact.vue b/docs/demos/views/contact.vue
index 0c17b6a0d..9ee1a7885 100644
--- a/docs/demos/views/contact.vue
+++ b/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>
 
diff --git a/docs/markdown/en-US/contact.md b/docs/markdown/en-US/contact.md
index 9074782b0..c4ef3ead3 100644
--- a/docs/markdown/en-US/contact.md
+++ b/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 |
diff --git a/docs/markdown/zh-CN/contact.md b/docs/markdown/zh-CN/contact.md
index 48c37efa8..9e5e9cc0b 100644
--- a/docs/markdown/zh-CN/contact.md
+++ b/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
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
diff --git a/packages/contact-card/index.vue b/packages/contact-card/index.vue
index 72bda4631..f33a681c0 100644
--- a/packages/contact-card/index.vue
+++ b/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>
diff --git a/packages/vant-css/src/contact-card.css b/packages/vant-css/src/contact-card.css
index c3850a2d4..d2fa24b6c 100644
--- a/packages/vant-css/src/contact-card.css
+++ b/packages/vant-css/src/contact-card.css
@@ -8,6 +8,12 @@
     background-color: $active-color;
   }
 
+  &--uneditable {
+    &:active {
+      background-color: $white;
+    }
+  }
+
   &--add {
     line-height: 40px;