From a6a431e8c76bc85ec5deb87aa755b19cd205332f Mon Sep 17 00:00:00 2001 From: rex Date: Tue, 26 Nov 2019 11:57:26 +0800 Subject: [PATCH] feat(AddressList): refactor style & add new prop default-tag-text (#5106) --- src/address-list/Item.tsx | 16 ++++++- src/address-list/README.md | 2 + src/address-list/README.zh-CN.md | 2 + src/address-list/demo/index.vue | 13 +++-- src/address-list/index.less | 48 +++++++++++++++---- src/address-list/index.tsx | 27 ++++++----- .../test/__snapshots__/demo.spec.js.snap | 45 +++++++++-------- .../test/__snapshots__/index.spec.js.snap | 11 +++-- src/style/var.less | 18 +++---- 9 files changed, 123 insertions(+), 59 deletions(-) diff --git a/src/address-list/Item.tsx b/src/address-list/Item.tsx index c5792e6c6..1ac884c32 100644 --- a/src/address-list/Item.tsx +++ b/src/address-list/Item.tsx @@ -3,6 +3,7 @@ import { emit, inherit } from '../utils/functional'; import Icon from '../icon'; import Cell from '../cell'; import Radio from '../radio'; +import Tag from '../tag'; // Types import { CreateElement, RenderContext } from 'vue/types'; @@ -13,12 +14,14 @@ export type AddressItemData = { tel: string | number; name: string; address: string; + isDefault: boolean; }; export type AddressItemProps = { data: AddressItemData; disabled?: boolean; switchable?: boolean; + defaultTagText?: string; }; export type AddressItemEvents = { @@ -60,7 +63,14 @@ function AddressItem( const genContent = () => { const { data } = props; const Info = [ -
{`${data.name}，${data.tel}`}
, +
+ {`${data.name} ${data.tel}`} + {data.isDefault && props.defaultTagText && ( + + {props.defaultTagText} + + )} +
,
{data.address}
]; @@ -77,6 +87,7 @@ function AddressItem( (AddressItem); diff --git a/src/address-list/README.md b/src/address-list/README.md index 95bb6a10b..7187257af 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -77,6 +77,7 @@ export default { | disabled-text | Disabled text | *string* | - | - | | switchable | Whether to allow switch address | *boolean* | `true` | - | | add-button-text | Add button text | *string* | `Add new address` | - | +| default-tag-text | Default tag text | *string* | - | - | ### Events @@ -97,6 +98,7 @@ export default { | name | Name | *string* | | tel | Phone | *string \| number* | | address | Address | *string* | +| isDefault | Is default address | *boolean* | ### Slots diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index f1e0e9a18..1bdc323bb 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -78,6 +78,7 @@ export default { | disabled-text | 不可配送提示文案 | *string* | - | - | | switchable | 是否允许切换地址 | *boolean* | `true` | - | | add-button-text | 底部按钮文字 | *string* | `新增地址` | - | +| default-tag-text | 默认地址标签文字 | *string* | - | - | ### Events @@ -98,6 +99,7 @@ export default { | name | 收货人姓名 | *string* | | tel | 收货人手机号 | *string \| number* | | address | 收货地址 | *string* | +| isDefault | 是否为默认地址 | *boolean* | ### Slots diff --git a/src/address-list/demo/index.vue b/src/address-list/demo/index.vue index 662900167..d1982cba2 100644 --- a/src/address-list/demo/index.vue +++ b/src/address-list/demo/index.vue @@ -3,6 +3,7 @@ { emit(ctx, disabled ? 'select-disabled' : 'select', item, index); @@ -67,16 +69,18 @@ function AddressList( {props.disabledText &&
{props.disabledText}
} {DisabledList} {slots.default && slots.default()} - + +
+
+ +
+ +
+
以下地址超出配送范围
+
+
+
王五 1320000000
+
浙江省杭州市滨江区江南大道 15 号
+
+ +
+
+ `; diff --git a/src/address-list/test/__snapshots__/index.spec.js.snap b/src/address-list/test/__snapshots__/index.spec.js.snap index e11f36c3a..867138aca 100644 --- a/src/address-list/test/__snapshots__/index.spec.js.snap +++ b/src/address-list/test/__snapshots__/index.spec.js.snap @@ -3,20 +3,21 @@ exports[`unswitchable 1`] = `
-
+
-
张三，13000000000
+
张三 13000000000
浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室
-
+
-
李四，1310000000
+
李四 1310000000
浙江省杭州市拱墅区莫干山路 50 号
-
+
+
`; diff --git a/src/style/var.less b/src/style/var.less index 10e91b82b..4197e5a9d 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -77,17 +77,19 @@ @address-edit-detail-finish-font-size: @font-size-sm; // AddressList +@address-list-padding: 12px 7px 100px 17px; @address-list-disabled-text-color: @gray-dark; -@address-list-disabled-text-font-size: @font-size-sm; -@address-list-disabled-text-line-height: 30px; +@address-list-disabled-text-padding: @padding-base * 5 0 @padding-md; +@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-item-padding: @padding-md; -@address-list-item-text-color: @gray-darker; -@address-list-item-disabled-text-color: @gray-dark; -@address-list-item-font-size: @font-size-sm; -@address-list-item-line-height: 16px; +@address-list-item-padding: @padding-sm; +@address-list-item-text-color: @text-color; +@address-list-item-disabled-text-color: @gray; +@address-list-item-font-size: 13px; +@address-list-item-line-height: 18px; @address-list-item-radio-icon-color: @red; -@address-list-edit-icon-size: 16px; +@address-list-edit-icon-size: 18px; // Button @button-mini-height: 22px;