From bd815a5839f6099833840e87062c15505409541a Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 12 Sep 2018 21:47:55 +0800
Subject: [PATCH] [improvement] AddressEdit: add more props (#1790)

---
 packages/address-edit/Detail.vue              |  7 +++--
 packages/address-edit/index.vue               | 31 ++++++++++++++++---
 .../test/__snapshots__/demo.spec.js.snap      |  2 +-
 .../test/__snapshots__/index.spec.js.snap     |  4 +--
 packages/vant-css/src/address-edit.css        | 10 +++---
 5 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/packages/address-edit/Detail.vue b/packages/address-edit/Detail.vue
index 587f228fb..e2212aa20 100644
--- a/packages/address-edit/Detail.vue
+++ b/packages/address-edit/Detail.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div :class="b()">
     <field
       v-on="$listeners"
-      ref="field"
-      rows="1"
       autosize
+      ref="field"
+      :rows="detailRows"
       :clearable="!isAndroid"
       type="textarea"
       maxlength="200"
@@ -51,6 +51,7 @@ export default create({
     value: String,
     error: Boolean,
     focused: Boolean,
+    detailRows: Number,
     searchResult: Array,
     showSearchResult: Boolean
   },
diff --git a/packages/address-edit/index.vue b/packages/address-edit/index.vue
index 7544ae035..861af60d7 100644
--- a/packages/address-edit/index.vue
+++ b/packages/address-edit/index.vue
@@ -3,6 +3,7 @@
     <cell-group>
       <field
         v-model="data.name"
+        clearable
         maxlength="15"
         :label="$t('name')"
         :placeholder="$t('namePlaceholder')"
@@ -11,6 +12,7 @@
       />
       <field
         v-model="data.tel"
+        clearable
         type="tel"
         :label="$t('tel')"
         :placeholder="$t('telPlaceholder')"
@@ -18,16 +20,19 @@
         @focus="onFocus('tel')"
       />
       <field
+        v-show="showArea"
         readonly
         :label="$t('area')"
         :placeholder="$t('areaPlaceholder')"
         :value="areaText"
-        @click="showArea = true"
+        @click="showAreaPopup = true"
       />
       <address-edit-detail
+        v-show="showDetail"
         :focused="detailFocused"
         :value="data.addressDetail"
         :error="errorInfo.addressDetail"
+        :detail-rows="detailRows"
         :search-result="searchResult"
         :show-search-result="showSearchResult"
         @focus="onFocus('addressDetail')"
@@ -65,14 +70,14 @@
       </van-button>
     </div>
 
-    <popup v-model="showArea" position="bottom" :lazy-render="false" :get-container="getAreaContainer">
+    <popup v-model="showAreaPopup" position="bottom" :lazy-render="false" :get-container="getAreaContainer">
       <van-area
         ref="area"
         :loading="!areaListLoaded"
         :value="data.areaCode"
         :area-list="areaList"
         @confirm="onAreaConfirm"
-        @cancel="showArea = false"
+        @cancel="showAreaPopup = false"
       />
     </popup>
   </div>
@@ -126,6 +131,18 @@ export default create({
     showSearchResult: Boolean,
     saveButtonText: String,
     deleteButtonText: String,
+    showArea: {
+      type: Boolean,
+      default: true
+    },
+    showDetail: {
+      type: Boolean,
+      default: true
+    },
+    detailRows: {
+      type: Number,
+      default: 1
+    },
     addressInfo: {
       type: Object,
       default: () => ({ ...defaultData })
@@ -143,7 +160,7 @@ export default create({
   data() {
     return {
       data: {},
-      showArea: false,
+      showAreaPopup: false,
       detailFocused: false,
       errorInfo: {
         tel: false,
@@ -209,7 +226,7 @@ export default create({
     },
 
     onAreaConfirm(values) {
-      this.showArea = false;
+      this.showAreaPopup = false;
       this.data.areaCode = values[2].code;
       this.assignAreaValues(values);
       this.$emit('change-area', values);
@@ -290,6 +307,10 @@ export default create({
       });
     },
 
+    setAddressDetail(value) {
+      this.data.addressDetail = value;
+    },
+
     getAreaContainer() {
       return document.body;
     }
diff --git a/packages/address-edit/test/__snapshots__/demo.spec.js.snap b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
index 35cb13b68..052a7ff82 100644
--- a/packages/address-edit/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/demo.spec.js.snap
@@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
           </div>
           <!---->
         </div>
-        <div>
+        <div class="van-address-edit-detail">
           <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field">
             <!---->
             <div class="van-cell__title"><span>详细地址</span>
diff --git a/packages/address-edit/test/__snapshots__/index.spec.js.snap b/packages/address-edit/test/__snapshots__/index.spec.js.snap
index 0d2bcab01..ea09da2a6 100644
--- a/packages/address-edit/test/__snapshots__/index.spec.js.snap
+++ b/packages/address-edit/test/__snapshots__/index.spec.js.snap
@@ -51,7 +51,7 @@ exports[`create a AddressEdit 1`] = `
       </div>
       <!---->
     </div>
-    <div>
+    <div class="van-address-edit-detail">
       <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field">
         <!---->
         <div class="van-cell__title"><span>详细地址</span>
@@ -156,7 +156,7 @@ exports[`create a AddressEdit with props 1`] = `
       </div>
       <!---->
     </div>
-    <div>
+    <div class="van-address-edit-detail">
       <div rows="1" maxlength="200" placeholder="街道门牌、楼层房间号等信息" class="van-cell van-hairline van-field">
         <!---->
         <div class="van-cell__title"><span>详细地址</span>
diff --git a/packages/vant-css/src/address-edit.css b/packages/vant-css/src/address-edit.css
index 34da89497..7bcf66286 100644
--- a/packages/vant-css/src/address-edit.css
+++ b/packages/vant-css/src/address-edit.css
@@ -27,9 +27,11 @@
     color: $gray-dark;
   }
 
-  &-detail__finish {
-    color: $blue;
-    font-size: 12px;
-    display: block;
+  &-detail {
+    &__finish {
+      color: $blue;
+      font-size: 12px;
+      display: block;
+    }
   }
 }