From d97e679e68685f7b22702f124b921734d765ed8b Mon Sep 17 00:00:00 2001 From: rex Date: Fri, 7 Feb 2020 10:07:39 +0800 Subject: [PATCH 1/5] feat(AddressList): add new slot item-bottom (#5629) --- src/address-list/Item.tsx | 32 +++++++----- src/address-list/README.md | 9 ++-- src/address-list/README.zh-CN.md | 9 ++-- src/address-list/index.less | 5 ++ src/address-list/index.tsx | 4 ++ .../test/__snapshots__/demo.spec.js.snap | 52 +++++++++++-------- .../test/__snapshots__/index.spec.js.snap | 28 +++++----- 7 files changed, 82 insertions(+), 57 deletions(-) diff --git a/src/address-list/Item.tsx b/src/address-list/Item.tsx index de936a08e..8aa233297 100644 --- a/src/address-list/Item.tsx +++ b/src/address-list/Item.tsx @@ -10,7 +10,7 @@ import Radio from '../radio'; // Types import { CreateElement, RenderContext } from 'vue/types'; -import { DefaultSlots } from '../utils/types'; +import { DefaultSlots, ScopedSlot } from '../utils/types'; export type AddressItemData = { id: string | number; @@ -27,6 +27,10 @@ export type AddressItemProps = { defaultTagText?: string; }; +export type AddressItemSlots = DefaultSlots & { + bottom?: ScopedSlot; +}; + export type AddressItemEvents = { onEdit(): void; onClick(): void; @@ -38,7 +42,7 @@ const [createComponent, bem] = createNamespace('address-item'); function AddressItem( h: CreateElement, props: AddressItemProps, - slots: DefaultSlots, + slots: AddressItemSlots, ctx: RenderContext ) { const { disabled, switchable } = props; @@ -95,18 +99,18 @@ function AddressItem( } return ( - +
+ + {slots.bottom?.({ ...props.data, disabled })} +
); } diff --git a/src/address-list/README.md b/src/address-list/README.md index 415984d15..3b3575309 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -104,7 +104,8 @@ export default { ### Slots -| Name | Description | -|------|------| -| default | Custom content after list | -| top | Custom content before list | +| Name | Description | SlotProps | +|------|------|------| +| default | Custom content after list | - | +| top | Custom content before list | - | +| item-bottom | Custom content after list item | item | diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index 60505d0d6..0d6387976 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -104,7 +104,8 @@ export default { ### Slots -| 名称 | 说明 | -|------|------| -| default | 在列表下方插入内容 | -| top | 在顶部插入内容 | +| 名称 | 说明 | SlotProps | +|------|------|------| +| default | 在列表下方插入内容 | - | +| top | 在顶部插入内容 | - | +| item-bottom | 在列表项底部插入内容 | 列表项的值 | diff --git a/src/address-list/index.less b/src/address-list/index.less index 45d47da63..d49805799 100644 --- a/src/address-list/index.less +++ b/src/address-list/index.less @@ -31,6 +31,7 @@ .van-address-item { padding: @address-list-item-padding; + background-color: @white; border-radius: @border-radius-lg; &:not(:last-child) { @@ -79,6 +80,10 @@ transform: translate(0, -50%); } + .van-cell { + padding: 0; + } + .van-radio__label { margin-left: @padding-sm; } diff --git a/src/address-list/index.tsx b/src/address-list/index.tsx index 06bb14b1f..1726e0508 100644 --- a/src/address-list/index.tsx +++ b/src/address-list/index.tsx @@ -23,6 +23,7 @@ export type AddressListProps = { export type AddressListSlots = DefaultSlots & { top?: ScopedSlot; + 'item-bottom'?: ScopedSlot; }; const [createComponent, bem, t] = createNamespace('address-list'); @@ -45,6 +46,9 @@ function AddressList( disabled={disabled} switchable={props.switchable} defaultTagText={props.defaultTagText} + scopedSlots={{ + bottom: slots['item-bottom'], + }} onSelect={() => { emit(ctx, disabled ? 'select-disabled' : 'select', item, index); diff --git a/src/address-list/test/__snapshots__/demo.spec.js.snap b/src/address-list/test/__snapshots__/demo.spec.js.snap index f7de8ec31..46d2927fc 100644 --- a/src/address-list/test/__snapshots__/demo.spec.js.snap +++ b/src/address-list/test/__snapshots__/demo.spec.js.snap @@ -5,34 +5,40 @@ exports[`renders demo correctly 1`] = `
-
-
- -
-
- -
- +
+
+
+ +
+ +
以下地址超出配送范围
-
-
-
王五 1320000000
-
浙江省杭州市滨江区江南大道 15 号
-
- +
+
+
+
王五 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 867138aca..d9ffb7d07 100644 --- a/src/address-list/test/__snapshots__/index.spec.js.snap +++ b/src/address-list/test/__snapshots__/index.spec.js.snap @@ -3,19 +3,23 @@ exports[`unswitchable 1`] = `
-
-
-
张三 13000000000
-
浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室
-
- +
+
+
+
张三 13000000000
+
浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室
+
+ +
-
-
-
李四 1310000000
-
浙江省杭州市拱墅区莫干山路 50 号
-
- +
+
+
+
李四 1310000000
+
浙江省杭州市拱墅区莫干山路 50 号
+
+ +
From fd9cd12fe598d7116f695eaf0cb749e82d824841 Mon Sep 17 00:00:00 2001 From: rex Date: Fri, 7 Feb 2020 10:57:36 +0800 Subject: [PATCH 2/5] feat(AddressEdit): add new prop disable-area (#5630) --- src/address-edit/README.md | 3 +++ src/address-edit/README.zh-CN.md | 3 +++ src/address-edit/index.js | 9 +++++---- 3 files changed, 11 insertions(+), 4 deletions(-) diff --git a/src/address-edit/README.md b/src/address-edit/README.md index fafcf28e2..8bd371d86 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -73,6 +73,9 @@ export default { | show-delete | Whether to show delete button | *boolean* | `false` | | show-set-default | Whether to show default address switch | *boolean* | `false` | | show-search-result | Whether to show address search result | *boolean* | `false` | +| show-area | Whether to show area cell | *boolean* | `true` | +| show-detail | Whether to show detail field | *boolean* | `true` | +| disable-area | Whether to disable area select | *boolean* | `false` | | save-button-text | Save button text | *string* | `Save` | | delete-button-text | Delete button text | *string* | `Delete` | | detail-rows | Detail input rows | *number \| string* | `1` | diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index ac93c6d30..80efbddb8 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -73,6 +73,9 @@ export default { | show-delete | 是否显示删除按钮 | *boolean* | `false` | | show-set-default | 是否显示默认地址栏 | *boolean* | `false` | | show-search-result | 是否显示搜索结果 | *boolean* | `false` | +| show-area | 是否显示地区 | *boolean* | `true` | +| show-detail | 是否显示详细地址 | *boolean* | `true` | +| disable-area | 是否禁用地区选择 | *boolean* | `false` | | save-button-text | 保存按钮文字 | *string* | `保存` | | delete-button-text | 删除按钮文字 | *string* | `删除` | | detail-rows | 详细地址输入框行数 | *number \| string* | `1` | diff --git a/src/address-edit/index.js b/src/address-edit/index.js index e24164db3..3e9d42179 100644 --- a/src/address-edit/index.js +++ b/src/address-edit/index.js @@ -52,6 +52,7 @@ export default createComponent({ type: Boolean, default: true, }, + disableArea: Boolean, detailRows: { type: [Number, String], default: 1, @@ -250,7 +251,7 @@ export default createComponent({ }, render() { - const { data, errorInfo, searchResult } = this; + const { data, errorInfo, searchResult, disableArea } = this; const onFocus = name => () => this.onFocus(name); // hide bottom field when use search && detail get focused @@ -280,15 +281,15 @@ export default createComponent({ { - this.showAreaPopup = true; + this.showAreaPopup = !disableArea; }} /> Date: Fri, 7 Feb 2020 10:43:00 +0800 Subject: [PATCH 3/5] fix(Field): input slot should align center --- src/field/index.less | 1 + 1 file changed, 1 insertion(+) diff --git a/src/field/index.less b/src/field/index.less index f7ba70439..00b6aeb61 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -17,6 +17,7 @@ &__body { display: flex; align-items: center; + height: 100%; } &__control { From f3398dc2cdd1191613b97454b4725275458bde1b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 7 Feb 2020 14:33:44 +0800 Subject: [PATCH 4/5] feat(Field): add name prop --- src/field/README.md | 3 ++- src/field/README.zh-CN.md | 3 ++- src/field/index.js | 2 ++ src/field/test/__snapshots__/index.spec.js.snap | 8 ++++++++ src/field/test/index.spec.js | 9 +++++++++ 5 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/field/README.md b/src/field/README.md index 9f97c46d2..7310ff529 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -214,8 +214,9 @@ Use `input-align` prop to align the input value | Attribute | Description | Type | Default | |------|------|------|------| -| value | Field value | *number \| string* | - | +| v-model (value) | Field value | *number \| string* | - | | label | Field label | *string* | - | +| name | Name | *string* | - | | type | Input type, can be set to `tel` `digit`
`number` `textarea` `password` | *string* | `text` | | size | Size，can be set to `large` | *string* | - | | maxlength | Max length of value | *number \| string* | - | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index cea5cace8..dd0aac3c7 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -233,8 +233,9 @@ export default { | 参数 | 说明 | 类型 | 默认值 | |------|------|------|------| +| v-model (value) | 当前输入的值 | *number \| string* | - | | label | 输入框左侧文本 | *string* | - | -| value | 当前输入的值 | *number \| string* | - | +| name | 名称，提交表单的标识符 | *string* | - | | type | 输入框类型, 可选值为 `tel` `digit`
`number` `textarea` `password` 等 | *string* | `text` | | size | 大小，可选值为 `large` | *string* | - | | maxlength | 输入的最大字符数 | *number \| string* | - | diff --git a/src/field/index.js b/src/field/index.js index 32b58c80c..2bb812c91 100644 --- a/src/field/index.js +++ b/src/field/index.js @@ -17,6 +17,7 @@ export default createComponent({ props: { ...cellProps, + name: String, error: Boolean, disabled: Boolean, readonly: Boolean, @@ -237,6 +238,7 @@ export default createComponent({ }, attrs: { ...this.$attrs, + name: this.name, disabled: this.disabled, readonly: this.readonly, placeholder: this.placeholder, diff --git a/src/field/test/__snapshots__/index.spec.js.snap b/src/field/test/__snapshots__/index.spec.js.snap index 0938a1696..15b8e29c4 100644 --- a/src/field/test/__snapshots__/index.spec.js.snap +++ b/src/field/test/__snapshots__/index.spec.js.snap @@ -53,6 +53,14 @@ exports[`label-width prop without unit 1`] = `
`; +exports[`name prop 1`] = ` +
+
+
+
+
+`; + exports[`reach max word-limit 1`] = `
diff --git a/src/field/test/index.spec.js b/src/field/test/index.spec.js index 6554f4150..1823f89cc 100644 --- a/src/field/test/index.spec.js +++ b/src/field/test/index.spec.js @@ -291,3 +291,12 @@ test('reach max word-limit', () => { }); expect(wrapper).toMatchSnapshot(); }); + +test('name prop', () => { + const wrapper = mount(Field, { + propsData: { + name: 'foo', + }, + }); + expect(wrapper).toMatchSnapshot(); +}); From 79a38a3354ddc6a64647829e9c273d0458599d62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Fri, 7 Feb 2020 15:11:41 +0800 Subject: [PATCH 5/5] Revert "fix(Field): input slot should align center" This reverts commit 0f137852e059a749bbdf1d1c36577a810be08271. --- src/field/index.less | 1 - 1 file changed, 1 deletion(-) diff --git a/src/field/index.less b/src/field/index.less index 00b6aeb61..f7ba70439 100644 --- a/src/field/index.less +++ b/src/field/index.less @@ -17,7 +17,6 @@ &__body { display: flex; align-items: center; - height: 100%; } &__control {