blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-26 03:16:35 +08:00
Code Issues Projects Releases Wiki Activity

feat(AddressList): refactor style & add new prop default-tag-text (#5106)

Browse Source
This commit is contained in:
rex 2019-11-26 11:57:26 +08:00 committed by neverland
parent 9b01cac23f
commit a6a431e8c7
9 changed files with 123 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/address-list/Item.tsx
View File

@ -3,6 +3,7 @@ import { emit, inherit } from '../utils/functional';
import Icon from '../icon'; import Icon from '../icon';
import Cell from '../cell'; import Cell from '../cell';
import Radio from '../radio'; import Radio from '../radio';
import Tag from '../tag';
// Types // Types
import { CreateElement, RenderContext } from 'vue/types'; import { CreateElement, RenderContext } from 'vue/types';
@ -13,12 +14,14 @@ export type AddressItemData = {
tel: string | number; tel: string | number;
name: string; name: string;
address: string; address: string;
isDefault: boolean;
}; };
export type AddressItemProps = { export type AddressItemProps = {
data: AddressItemData; data: AddressItemData;
disabled?: boolean; disabled?: boolean;
switchable?: boolean; switchable?: boolean;
defaultTagText?: string;
}; };
export type AddressItemEvents = { export type AddressItemEvents = {
@ -60,7 +63,14 @@ function AddressItem(
const genContent = () => { const genContent = () => {
const { data } = props; const { data } = props;
const Info = [ const Info = [
<div class={bem('name')}>{`${data.name}，${data.tel}`}</div>, <div class={bem('name')}>
{`${data.name} ${data.tel}`}
{data.isDefault && props.defaultTagText && (
<Tag type="danger" round class={bem('tag')}>
{props.defaultTagText}
</Tag>
)}
</div>,
<div class={bem('address')}>{data.address}</div> <div class={bem('address')}>{data.address}</div>
]; ];
@ -77,6 +87,7 @@ function AddressItem(
<Cell <Cell
class={bem({ disabled })} class={bem({ disabled })}
valueClass={bem('value')} valueClass={bem('value')}
border={false}
clickable={switchable && !disabled} clickable={switchable && !disabled}
scopedSlots={{ scopedSlots={{
default: genContent, default: genContent,
@ -91,7 +102,8 @@ function AddressItem(
AddressItem.props = { AddressItem.props = {
data: Object, data: Object,
disabled: Boolean, disabled: Boolean,
switchable: Boolean switchable: Boolean,
defaultTagText: String
}; };
export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem); export default createComponent<AddressItemProps, AddressItemEvents>(AddressItem);

2
src/address-list/README.md
View File

@ -77,6 +77,7 @@ export default {
| disabled-text | Disabled text | *string* | - | - | | disabled-text | Disabled text | *string* | - | - |
| switchable | Whether to allow switch address | *boolean* | `true` | - | | switchable | Whether to allow switch address | *boolean* | `true` | - |
| add-button-text | Add button text | *string* | `Add new address` | - | | add-button-text | Add button text | *string* | `Add new address` | - |
| default-tag-text | Default tag text | *string* | - | - |
### Events ### Events
@ -97,6 +98,7 @@ export default {
| name | Name | *string* | | name | Name | *string* |
| tel | Phone | *string \| number* | | tel | Phone | *string \| number* |
| address | Address | *string* | | address | Address | *string* |
| isDefault | Is default address | *boolean* |
### Slots ### Slots

2
src/address-list/README.zh-CN.md
View File

@ -78,6 +78,7 @@ export default {
| disabled-text | 不可配送提示文案 | *string* | - | - | | disabled-text | 不可配送提示文案 | *string* | - | - |
| switchable | 是否允许切换地址 | *boolean* | `true` | - | | switchable | 是否允许切换地址 | *boolean* | `true` | - |
| add-button-text | 底部按钮文字 | *string* | `新增地址` | - | | add-button-text | 底部按钮文字 | *string* | `新增地址` | - |
| default-tag-text | 默认地址标签文字 | *string* | - | - |
### Events ### Events
@ -98,6 +99,7 @@ export default {
| name | 收货人姓名 | *string* | | name | 收货人姓名 | *string* |
| tel | 收货人手机号 | *string \| number* | | tel | 收货人手机号 | *string \| number* |
| address | 收货地址 | *string* | | address | 收货地址 | *string* |
| isDefault | 是否为默认地址 | *boolean* |
### Slots ### Slots

13
src/address-list/demo/index.vue
View File

@ -3,6 +3,7 @@
<demo-block :title="$t('basicUsage')"> <demo-block :title="$t('basicUsage')">
<van-address-list <van-address-list
v-model="chosenAddressId" v-model="chosenAddressId"
:default-tag-text="$t('defaultTagText')"
:list="$t('list')" :list="$t('list')"
:disabled-list="$t('disabledList')" :disabled-list="$t('disabledList')"
:disabled-text="$t('disabledText')" :disabled-text="$t('disabledText')"
@ -22,7 +23,8 @@ export default {
id: '1', id: '1',
name: '张三', name: '张三',
tel: '13000000000', tel: '13000000000',
address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室' address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
isDefault: true
}, },
{ {
id: '2', id: '2',
@ -41,7 +43,8 @@ export default {
], ],
add: '新增地址', add: '新增地址',
edit: '编辑地址', edit: '编辑地址',
disabledText: '以下地址超出配送范围' disabledText: '以下地址超出配送范围',
defaultTagText: '默认'
}, },
'en-US': { 'en-US': {
list: [ list: [
@ -49,7 +52,8 @@ export default {
id: '1', id: '1',
name: 'John Snow', name: 'John Snow',
tel: '13000000000', tel: '13000000000',
address: 'Somewhere' address: 'Somewhere',
isDefault: true
}, },
{ {
id: '2', id: '2',
@ -68,7 +72,8 @@ export default {
], ],
add: 'Add', add: 'Add',
edit: 'Edit', edit: 'Edit',
disabledText: 'The following address is out of range' disabledText: 'The following address is out of range',
defaultTagText: 'Default'
} }
}, },

48
src/address-list/index.less
View File

@ -3,17 +3,26 @@
.van-address-list { .van-address-list {
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100%;
padding-bottom: 100px; padding: @address-list-padding;
&__add { &__bottom {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
z-index: @address-list-add-button-z-index; z-index: @address-list-add-button-z-index;
box-sizing: border-box;
width: 100%;
padding: 5px @padding-md;
background-color: @white;
}
&__add {
height: 40px;
line-height: 38px;
} }
&__disabled-text { &__disabled-text {
padding: 0 @padding-md; padding: @address-list-disabled-text-padding;
color: @address-list-disabled-text-color; color: @address-list-disabled-text-color;
font-size: @address-list-disabled-text-font-size; font-size: @address-list-disabled-text-font-size;
line-height: @address-list-disabled-text-line-height; line-height: @address-list-disabled-text-line-height;
@ -22,16 +31,30 @@
.van-address-item { .van-address-item {
padding: @address-list-item-padding; padding: @address-list-item-padding;
border-radius: @border-radius-md;
&:not(:last-child) {
margin-bottom: @padding-sm;
}
&__value { &__value {
padding-right: @padding-xl; padding-right: 44px;
} }
&__name { &__name {
margin-bottom: @padding-base; display: flex;
font-weight: @font-weight-bold; align-items: center;
font-size: @font-size-md; margin-bottom: @padding-xs;
line-height: 20px; font-size: @font-size-lg;
line-height: 22px;
}
&__tag {
flex: none;
margin-left: @padding-xs;
padding-top: 0;
padding-bottom: 0;
line-height: 1.4em;
} }
&__address { &__address {
@ -51,12 +74,21 @@
position: absolute; position: absolute;
top: 50%; top: 50%;
right: @padding-md; right: @padding-md;
color: @gray-dark;
font-size: @address-list-edit-icon-size; font-size: @address-list-edit-icon-size;
transform: translate(0, -50%); transform: translate(0, -50%);
} }
.van-radio__label {
margin-left: @padding-sm;
}
.van-radio__icon--checked .van-icon { .van-radio__icon--checked .van-icon {
background-color: @address-list-item-radio-icon-color; background-color: @address-list-item-radio-icon-color;
border-color: @address-list-item-radio-icon-color; border-color: @address-list-item-radio-icon-color;
} }
.van-radio__icon:not(.van-radio__icon--checked) {
visibility: hidden;
}
} }

27
src/address-list/index.tsx
View File

@ -15,6 +15,7 @@ export type AddressListProps = {
addButtonText?: string; addButtonText?: string;
list?: AddressItemData[]; list?: AddressItemData[];
disabledList?: AddressItemData[]; disabledList?: AddressItemData[];
defaultTagText?: string;
}; };
export type AddressListSlots = DefaultSlots & { export type AddressListSlots = DefaultSlots & {
@ -40,6 +41,7 @@ function AddressList(
key={item.id} key={item.id}
disabled={disabled} disabled={disabled}
switchable={props.switchable} switchable={props.switchable}
defaultTagText={props.defaultTagText}
onSelect={() => { onSelect={() => {
emit(ctx, disabled ? 'select-disabled' : 'select', item, index); emit(ctx, disabled ? 'select-disabled' : 'select', item, index);
@ -67,16 +69,18 @@ function AddressList(
{props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>} {props.disabledText && <div class={bem('disabled-text')}>{props.disabledText}</div>}
{DisabledList} {DisabledList}
{slots.default && slots.default()} {slots.default && slots.default()}
<Button <div class={bem('bottom')}>
square <Button
size="large" round
type="danger" block
class={bem('add')} type="danger"
text={props.addButtonText || t('add')} class={bem('add')}
onClick={() => { text={props.addButtonText || t('add')}
emit(ctx, 'add'); onClick={() => {
}} emit(ctx, 'add');
/> }}
/>
</div>
</div> </div>
); );
} }
@ -90,7 +94,8 @@ AddressList.props = {
switchable: { switchable: {
type: Boolean, type: Boolean,
default: true default: true
} },
defaultTagText: String
}; };
export default createComponent<AddressListProps>(AddressList); export default createComponent<AddressListProps>(AddressList);

45
src/address-list/test/__snapshots__/demo.spec.js.snap
View File

@ -5,34 +5,37 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-address-list"> <div class="van-address-list">
<div role="radiogroup" class="van-radio-group"> <div role="radiogroup" class="van-radio-group">
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item"> <div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div role="radio" tabindex="0" aria-checked="true" class="van-radio"> <div role="radio" tabindex="0" aria-checked="true" class="van-radio">
<div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success"> <div class="van-radio__icon van-radio__icon--round van-radio__icon--checked" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三，13000000000</div><div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span> <!----></i></div><span class="van-radio__label"><div class="van-address-item__name">张三 13000000000<span class="van-tag van-tag--round van-tag--danger van-address-item__tag">默认</span>
</div> </div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span>
<!----></i> </div>
</div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><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-item__edit">
<!----></i>
</div>
</div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell van-address-item van-address-item--disabled">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">王五，1320000000</div>
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i> <!----></i>
</div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button> </div>
<div role="button" tabindex="0" class="van-cell van-cell--clickable van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div role="radio" tabindex="-1" aria-checked="false" class="van-radio">
<div class="van-radio__icon van-radio__icon--round" style="font-size: 16px;"><i class="van-icon van-icon-success">
<!----></i></div><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-item__edit">
<!----></i>
</div>
</div> </div>
<div class="van-address-list__disabled-text">以下地址超出配送范围</div>
<div class="van-cell van-cell--borderless van-address-item van-address-item--disabled">
<div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">王五 1320000000</div>
<div class="van-address-item__address">浙江省杭州市滨江区江南大道 15 号</div>
</div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i>
</div>
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
</div> </div>
</div> </div>
</div>
`; `;

11
src/address-list/test/__snapshots__/index.spec.js.snap
View File

@ -3,20 +3,21 @@
exports[`unswitchable 1`] = ` exports[`unswitchable 1`] = `
<div class="van-address-list"> <div class="van-address-list">
<div role="radiogroup" class="van-radio-group"> <div role="radiogroup" class="van-radio-group">
<div class="van-cell van-address-item"> <div class="van-cell van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">张三，13000000000</div> <div class="van-address-item__name">张三 13000000000</div>
<div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div> <div class="van-address-item__address">浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i> <!----></i>
</div> </div>
<div class="van-cell van-address-item"> <div class="van-cell van-cell--borderless van-address-item">
<div class="van-cell__value van-cell__value--alone van-address-item__value"> <div class="van-cell__value van-cell__value--alone van-address-item__value">
<div class="van-address-item__name">李四，1310000000</div> <div class="van-address-item__name">李四 1310000000</div>
<div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div> <div class="van-address-item__address">浙江省杭州市拱墅区莫干山路 50 号</div>
</div><i class="van-icon van-icon-edit van-address-item__edit"> </div><i class="van-icon van-icon-edit van-address-item__edit">
<!----></i> <!----></i>
</div> </div>
</div><button class="van-button van-button--danger van-button--large van-button--square van-address-list__add"><span class="van-button__text">新增地址</span></button> </div>
<div class="van-address-list__bottom"><button class="van-button van-button--danger van-button--normal van-button--block van-button--round van-address-list__add"><span class="van-button__text">新增地址</span></button></div>
</div> </div>
`; `;

18
src/style/var.less
View File

@ -77,17 +77,19 @@
@address-edit-detail-finish-font-size: @font-size-sm; @address-edit-detail-finish-font-size: @font-size-sm;
// AddressList // AddressList
@address-list-padding: 12px 7px 100px 17px;
@address-list-disabled-text-color: @gray-dark; @address-list-disabled-text-color: @gray-dark;
@address-list-disabled-text-font-size: @font-size-sm; @address-list-disabled-text-padding: @padding-base * 5 0 @padding-md;
@address-list-disabled-text-line-height: 30px; @address-list-disabled-text-font-size: @font-size-md;
@address-list-disabled-text-line-height: 20px;
@address-list-add-button-z-index: 999; @address-list-add-button-z-index: 999;
@address-list-item-padding: @padding-md; @address-list-item-padding: @padding-sm;
@address-list-item-text-color: @gray-darker; @address-list-item-text-color: @text-color;
@address-list-item-disabled-text-color: @gray-dark; @address-list-item-disabled-text-color: @gray;
@address-list-item-font-size: @font-size-sm; @address-list-item-font-size: 13px;
@address-list-item-line-height: 16px; @address-list-item-line-height: 18px;
@address-list-item-radio-icon-color: @red; @address-list-item-radio-icon-color: @red;
@address-list-edit-icon-size: 16px; @address-list-edit-icon-size: 18px;
// Button // Button
@button-mini-height: 22px; @button-mini-height: 22px;