[improvement] AddressList: add switchable prop (#1938)

youzan · Oct 16, 2018 · f90e96f · f90e96f
1 parent fe5c69a
commit f90e96f
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 9 deletions.
diff --git a/packages/address-list/Item.vue b/packages/address-list/Item.vue
@@ -1,5 +1,9 @@
 <template>
-  <cell :class="b({ disabled })" :is-link="!disabled" @click="$emit('select')">
+  <cell
+    :class="b({ disabled, unswitchable: !switchable })"
+    :is-link="!disabled && switchable"
+    @click="onSelect"
+  >
     <radio :name="data.id">
       <div :class="b('name')">{{ data.name }}，{{ data.tel }}</div>
       <div :class="b('address')">{{ data.address }}</div>
@@ -26,7 +30,16 @@ export default create({
 
   props: {
     data: Object,
-    disabled: Boolean
+    disabled: Boolean,
+    switchable: Boolean
+  },
+
+  methods: {
+    onSelect() {
+      if (this.switchable) {
+        this.$emit('select');
+      }
+    }
   }
 });
 </script>
diff --git a/packages/address-list/en-US.md b/packages/address-list/en-US.md
@@ -71,6 +71,7 @@ export default {
 | list | Address list | Array | `[]` |
 | disabled-list | Disabled address list | `Array` | `[]` |
 | disabled-text | Disabled text | `String` | - |
+| switchable | Whether to allow switch address | `Boolean` | `true` |
 | add-button-text | Add button text | String | `Add new address` |
 
 ### Event

diff --git a/packages/address-list/index.vue b/packages/address-list/index.vue
@@ -7,6 +7,7 @@
           v-for="(item, index) in list"
           :data="item"
           :key="item.id"
+          :switchable="switchable"
           @select="$emit('select', item, index)"
           @edit="$emit('edit', item, index)"
         />
@@ -54,6 +55,10 @@ export default create({
     disabledText: String,
     addButtonText: String,
     value: [String, Number],
+    switchable: {
+      type: Boolean,
+      default: true
+    },
     list: {
       type: Array,
       default: () => []

diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap
@@ -30,7 +30,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-address-list__disabled-text">以下地址超出配送范围</div>
       <div class="van-cell-group van-hairline--top-bottom">
-        <div class="van-cell van-address-item van-address-item--disabled">
+        <div class="van-cell van-address-item van-address-item--disabled van-address-item--unswitchable">
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">

diff --git a/packages/address-list/zh-CN.md b/packages/address-list/zh-CN.md
@@ -73,6 +73,7 @@ export default {
 | list | 地址列表 | `Array` | `[]` |
 | disabled-list | 不可配送地址列表 | `Array` | `[]` |
 | disabled-text | 不可配送提示文案 | `String` | - |
+| switchable | 是否允许切换地址 | `Boolean` | `true` |
 | add-button-text | 底部按钮文字 | `String` | `新增地址` |
 
 ### Event

diff --git a/packages/vant-css/src/address-list.css b/packages/vant-css/src/address-list.css
@@ -61,12 +61,7 @@
     color: $gray-darker;
   }
 
-  &--disabled {
-    .van-address-item__name,
-    .van-address-item__address {
-      color: $gray-dark;
-    }
-
+  &--unswitchable {
     .van-radio__input {
       display: none;
     }
@@ -76,6 +71,13 @@
     }
   }
 
+  &--disabled {
+    .van-address-item__name,
+    .van-address-item__address {
+      color: $gray-dark;
+    }
+  }
+
   &__edit {
     position: absolute;
     top: 50%;