[new feature] AddressList: support disabled list (#1729)

This commit is contained in:
neverland
2018-08-30 21:11:23 +08:00
committed by GitHub
parent 1471f6d5b5
commit ad5ca640e0
10 changed files with 158 additions and 62 deletions

View File

@@ -0,0 +1,32 @@
<template>
<cell :class="b({ disabled })" :is-link="!disabled" @click="$emit('select')">
<radio :name="data.id">
<div :class="b('name')">{{ data.name }}{{ data.tel }}</div>
<div :class="b('address')">{{ data.address }}</div>
</radio>
<icon
slot="right-icon"
name="edit"
:class="b('edit')"
@click.stop="$emit('edit')"
/>
</cell>
</template>
<script>
import Radio from '../radio';
import create from '../utils/create';
export default create({
name: 'address-item',
components: {
Radio
},
props: {
data: Object,
disabled: Boolean
}
});
</script>

View File

@@ -4,6 +4,8 @@
<van-address-list
v-model="chosenAddressId"
:list="$t('list')"
:disabled-list="$t('disabledList')"
:disabled-text="$t('disabledText')"
@add="onAdd"
@edit="onEdit"
/>
@@ -27,7 +29,9 @@ export default {
name: '李四',
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号'
},
}
],
disabledList: [
{
id: '3',
name: '王五',
@@ -36,7 +40,8 @@ export default {
}
],
add: '新增地址',
edit: '编辑地址'
edit: '编辑地址',
disabledText: '以下地址超出配送范围'
},
'en-US': {
list: [
@@ -51,7 +56,9 @@ export default {
name: 'Ned Stark',
tel: '1310000000',
address: 'Somewhere'
},
}
],
disabledList: [
{
id: '3',
name: 'Tywin',
@@ -60,7 +67,8 @@ export default {
}
],
add: 'Add',
edit: 'Edit'
edit: 'Edit',
disabledText: 'The following address is out of range'
}
},
@@ -74,6 +82,7 @@ export default {
onAdd() {
this.$toast(this.$t('add'));
},
onEdit(item, index) {
this.$toast(this.$t('edit') + ':' + index);
}

View File

@@ -15,6 +15,8 @@ Vue.use(AddressList);
<van-address-list
v-model="chosenAddressId"
:list="list"
:disabled-list="disabledList"
disabled-text="The following address is out of range"
@add="onAdd"
@edit="onEdit"
/>
@@ -38,6 +40,14 @@ export default {
tel: '1310000000',
address: 'Somewhere'
}
],
disabledList: [
{
id: '3',
name: 'Tywin',
tel: '1320000000',
address: 'Somewhere'
}
]
}
},
@@ -59,6 +69,8 @@ export default {
|-----------|-----------|-----------|-------------|
| v-model | Id of chosen address | String | - |
| list | Address list | Array | `[]` |
| disabled-list | Disabled address list | `Array` | `[]` |
| disabled-text | Disabled text | `String` | - |
| add-button-text | Add button text | String | `Add new address` |
### Event
@@ -66,8 +78,10 @@ export default {
| Event | Description | Arguments |
|-----------|-----------|-----------|
| add | Triggered when click add button | - |
| edit | Triggered when click edit button | item: address objectindex |
| edit | Triggered when edit address | item: address objectindex |
| select | Triggered when select address | item: address objectindex |
| edit-disabled | Triggered when edit disabled address | item: address objectindex |
| select-disabled | Triggered when select disabled address | item: address objectindex |
### Address Data Structure

View File

@@ -1,22 +1,28 @@
<template>
<div :class="b()">
<slot name="top" />
<radio-group :value="value" :class="b('group')" @input="$emit('input', $event)">
<radio-group :value="value" @input="$emit('input', $event)">
<cell-group>
<cell v-for="(item, index) in list" :key="item.id" is-link>
<radio :name="item.id" @click="$emit('select', item, index)">
<div :class="b('name')">{{ item.name }}{{ item.tel }}</div>
<div :class="b('address')">{{ $t('address') }}{{ item.address }}</div>
</radio>
<icon
slot="right-icon"
name="edit"
:class="b('edit')"
@click="$emit('edit', item, index)"
/>
</cell>
<address-item
v-for="(item, index) in list"
:data="item"
:key="item.id"
@select="$emit('select', item, index)"
@edit="$emit('edit', item, index)"
/>
</cell-group>
</radio-group>
<div v-if="disabledText" :class="b('disabled-text')">{{ disabledText }}</div>
<cell-group v-if="disabledList.length">
<address-item
v-for="(item, index) in disabledList"
disabled
:data="item"
:key="item.id"
@select="$emit('select-disabled', item, index)"
@edit="$emit('edit-disabled', item, index)"
/>
</cell-group>
<slot />
<van-button
square
@@ -31,25 +37,30 @@
<script>
import create from '../utils/create';
import Radio from '../radio';
import RadioGroup from '../radio-group';
import VanButton from '../button';
import AddressItem from './Item';
export default create({
name: 'address-list',
components: {
Radio,
RadioGroup,
VanButton
VanButton,
AddressItem
},
props: {
disabledText: String,
addButtonText: String,
value: [String, Number],
list: {
type: Array,
default: () => []
},
disabledList: {
type: Array,
default: () => []
}
}
});

View File

@@ -4,38 +4,41 @@ exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-address-list">
<div class="van-radio-group van-address-list__group">
<div class="van-radio-group">
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-cell--clickable van-hairline">
<div class="van-cell van-cell--clickable van-hairline van-address-item">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">张三13000000000</div> <div class="van-address-list__address">收货地址:浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">张三13000000000</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
</div>
<i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!---->
</i>
</div>
<div class="van-cell van-cell--clickable van-hairline">
<div class="van-cell van-cell--clickable van-hairline van-address-item">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">李四1310000000</div> <div class="van-address-list__address">收货地址:浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">李四1310000000</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
</div>
<i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;font-size:undefined;">
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!---->
</i>
</div>
<div class="van-cell van-cell--clickable van-hairline">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">王五1320000000</div> <div class="van-address-list__address">收货地址:浙江省杭州市滨江区江南大道 15 号</div></span></div>
</div>
<i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;font-size:undefined;">
<!---->
</i>
</div>
</div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell-group van-hairline--top-bottom">
<div class="van-cell van-hairline van-address-item van-address-item--disabled">
<!---->
<!---->
<div class="van-cell__value van-cell__value--alone">
<div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;font-size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-item__name">王五1320000000</div> <div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div></span></div>
</div>
<i class="van-icon van-icon-edit van-address-item__edit" style="color:undefined;font-size:undefined;">
<!---->
</i>
</div>
</div>
<button class="van-button van-button--danger van-button--large van-button--square van-address-list__add">

View File

@@ -15,6 +15,8 @@ Vue.use(AddressList);
<van-address-list
v-model="chosenAddressId"
:list="list"
:disabled-list="disabledList"
disabled-text="以下地址超出配送范围"
@add="onAdd"
@edit="onEdit"
/>
@@ -38,6 +40,14 @@ export default {
tel: '1310000000',
address: '浙江省杭州市拱墅区莫干山路 50 号'
}
],
disabledList: [
{
id: '3',
name: '王五',
tel: '1320000000',
address: '浙江省杭州市滨江区江南大道 15 号'
}
]
}
},
@@ -46,6 +56,7 @@ export default {
onAdd() {
Toast('新增地址');
},
onEdit(item, index) {
Toast('编辑地址:' + index);
}
@@ -58,17 +69,21 @@ export default {
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------|-----------|-------------|
| v-model | 当前选中地址的 id | String | - |
| list | 地址列表 | Array | `[]` |
| add-button-text | 底部按钮文字 | String | `新增地址` |
| v-model | 当前选中地址的 id | `String` | - |
| list | 地址列表 | `Array` | `[]` |
| disabled-list | 不可配送地址列表 | `Array` | `[]` |
| disabled-text | 不可配送提示文案 | `String` | - |
| add-button-text | 底部按钮文字 | `String` | `新增地址` |
### Event
| 事件名 | 说明 | 参数 |
|-----------|-----------|-----------|
| add | 点击新增按钮时触发 | - |
| edit | 点击编辑按钮时触发 | item: 当前地址对象index: 索引 |
| select | 切换选中的地址时触发 | item: 当前地址对象index: 索引 |
| edit | 点击编辑按钮时触发 | item: 地址对象index: 索引 |
| select | 切换选中的地址时触发 | item: 地址对象index: 索引 |
| edit-disabled | 编辑不可配送的地址时触发 | item: 地址对象index: 索引 |
| select-disabled | 选中不可配送的地址时触发 | item: 地址对象index: 索引 |
### 数据格式