From 9f523682e00d28d3b6c2e3405bb1bbd80652aaac Mon Sep 17 00:00:00 2001 From: neverland Date: Fri, 11 Oct 2019 15:28:52 +0800 Subject: [PATCH] feat(ActionSheet): add description prop (#4691) --- src/action-sheet/README.md | 40 +++++++++++---- src/action-sheet/README.zh-CN.md | 49 ++++++++++++++----- src/action-sheet/demo/index.vue | 41 +++++++++++----- src/action-sheet/index.less | 8 +++ src/action-sheet/index.tsx | 7 +++ .../test/__snapshots__/demo.spec.js.snap | 3 ++ .../test/__snapshots__/index.spec.js.snap | 6 +++ src/action-sheet/test/index.spec.js | 12 +++++ src/style/var.less | 3 ++ 9 files changed, 133 insertions(+), 36 deletions(-) diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index 3621aa6ab..e693d38b2 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -16,11 +16,7 @@ Vue.use(ActionSheet); Use `actions` prop to set options of action-sheet. ```html - + ``` ```javascript @@ -48,10 +44,7 @@ export default { ### Status ```html - + ``` ```javascript @@ -76,11 +69,37 @@ export default { v-model="show" :actions="actions" cancel-text="Cancel" - @select="onSelect" @cancel="onCancel" /> ``` +```js +export default { + data() { + return { + show: false + }; + }, + + methods: { + onCancel() { + this.show = false; + Toast('cancel'); + } + } +} +``` + +### Show Description + +```html + +``` + ### ActionSheet with title ```html @@ -98,6 +117,7 @@ export default { | actions | Options | *Action[]* | `[]` | - | | title | Title | *string* | - | - | | cancel-text | Text of cancel button | *string* | - | - | +| description | Description above the options | *string* | - | 2.2.8 | | overlay | Whether to show overlay | *boolean* | `true` | - | | round | Whether to show round corner | *boolean* | `true` | 2.0.9 | | close-on-click-action | Whether to close when click action | *boolean* | `false` | - | diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index c7ef391f0..a52cbc018 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -16,11 +16,7 @@ Vue.use(ActionSheet); `ActionSheet`通过`actions`数组来定义展示的选项，数组的每一项是一个对象，对象属性见文档下方表格。 ```html - + ``` ```javascript @@ -38,7 +34,8 @@ export default { methods: { onSelect(item) { - // 点击选项时默认不会关闭菜单，可以手动关闭 + // 默认情况下，点击选项时不会自动关闭菜单 + // 可以通过 close-on-click-action 属性开启自动关闭 this.show = false; Toast(item.name); } @@ -48,13 +45,10 @@ export default { ### 选项状态 -选项可以设置为加载状态或禁用状态 +选项可以设置为加载状态或禁用状态，也可以通过`color`设置选项颜色 ```html - + ``` ```javascript @@ -81,11 +75,39 @@ export default { v-model="show" :actions="actions" cancel-text="取消" - @select="onSelect" @cancel="onCancel" /> ``` +```js +export default { + data() { + return { + show: false + }; + }, + + methods: { + onCancel() { + this.show = false; + Toast('cancel'); + } + } +} +``` + +### 展示描述信息 + +设置`description`属性后，会在选项上方显示描述信息 + +```html + +``` + ### 展示标题栏 通过设置`title`属性展示标题栏，同时可以使用插槽自定义菜单内容 @@ -110,8 +132,9 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | actions | 菜单选项 | *Action[]* | `[]` | - | -| title | 标题 | *string* | - | - | +| title | 顶部标题 | *string* | - | - | | cancel-text | 取消按钮文字 | *string* | - | - | +| description | 选项上方的描述信息 | *string* | - | 2.2.8 | | overlay | 是否显示遮罩层 | *boolean* | `true` | - | | round | 是否显示圆角 | *boolean* | `true` | 2.0.9 | | close-on-click-action | 是否在点击选项后关闭 | *boolean* | `false` | - | diff --git a/src/action-sheet/demo/index.vue b/src/action-sheet/demo/index.vue index a6cee4609..0ea774aeb 100644 --- a/src/action-sheet/demo/index.vue +++ b/src/action-sheet/demo/index.vue @@ -10,7 +10,7 @@ - + {{ $t('buttonText') }} - + {{ $t('buttonText') }} - + + + + + {{ $t('buttonText') }} +

{{ $t('content') }}

 @@ -37,19 +47,23 @@ export default { i18n: { 'zh-CN': { buttonText: '弹出菜单', - title2: '展示取消按钮', - title3: '展示标题栏', status: '选项状态', - description: '描述信息', - disabledOption: '禁用选项' + subname: '副文本', + disabledOption: '禁用选项', + showTitle: '展示标题栏', + showCancel: '展示取消按钮', + showDescription: '展示描述信息', + description: '这是一段描述信息' }, 'en-US': { buttonText: 'Show ActionSheet', - title2: 'ActionSheet with cancel button', - title3: 'ActionSheet with title', status: 'Status', - description: 'Description', - disabledOption: 'Disabled Option' + subname: 'Subname', + disabledOption: 'Disabled Option', + showTitle: 'ActionSheet with title', + showCancel: 'ActionSheet with cancel button', + showDescription: 'ActionSheet with description', + description: 'Description' } }, @@ -58,7 +72,8 @@ export default { show1: false, show2: false, show3: false, - show4: false + show4: false, + show5: false }; }, @@ -67,7 +82,7 @@ export default { return [ { name: this.$t('option') }, { name: this.$t('option') }, - { name: this.$t('option'), subname: this.$t('description') } + { name: this.$t('option'), subname: this.$t('subname') } ]; }, diff --git a/src/action-sheet/index.less b/src/action-sheet/index.less index 2ce87c9c3..a2d3637c2 100644 --- a/src/action-sheet/index.less +++ b/src/action-sheet/index.less @@ -51,6 +51,14 @@ text-align: center; } + &__description { + padding: @padding-md; + color: @action-sheet-description-color; + font-size: @action-sheet-description-font-size; + line-height: @action-sheet-description-line-height; + text-align: center; + } + &__close { position: absolute; top: 0; diff --git a/src/action-sheet/index.tsx b/src/action-sheet/index.tsx index d2e10c33b..2bdf3b027 100644 --- a/src/action-sheet/index.tsx +++ b/src/action-sheet/index.tsx @@ -27,6 +27,7 @@ export type ActionSheetProps = PopupMixinProps & { actions?: ActionSheetItem[]; duration: number; cancelText?: string; + description?: string; closeOnClickAction?: boolean; safeAreaInsetBottom?: boolean; }; @@ -116,6 +117,10 @@ function ActionSheet( } } + const Description = props.description && ( +
{props.description}
+ ); + return ( {Header()} + {Description} {props.actions && props.actions.map(Option)} {Content()} {CancelText()} @@ -145,6 +151,7 @@ ActionSheet.props = { actions: Array, duration: Number, cancelText: String, + description: String, getContainer: [String, Function], closeOnClickAction: Boolean, round: { diff --git a/src/action-sheet/test/__snapshots__/demo.spec.js.snap b/src/action-sheet/test/__snapshots__/demo.spec.js.snap index 1773d5aff..cc8ccfe36 100644 --- a/src/action-sheet/test/__snapshots__/demo.spec.js.snap +++ b/src/action-sheet/test/__snapshots__/demo.spec.js.snap @@ -14,5 +14,8 @@ exports[`renders demo correctly 1`] = `
+
+ +
`; diff --git a/src/action-sheet/test/__snapshots__/index.spec.js.snap b/src/action-sheet/test/__snapshots__/index.spec.js.snap index e371aed56..233851d5e 100644 --- a/src/action-sheet/test/__snapshots__/index.spec.js.snap +++ b/src/action-sheet/test/__snapshots__/index.spec.js.snap @@ -8,6 +8,12 @@ exports[`callback events 1`] = ` exports[`color option 1`] = `
`; +exports[`description prop 1`] = ` +
+
This is a description
+
+`; + exports[`disable lazy-render 1`] = ``; exports[`render title and default slot 1`] = ``; diff --git a/src/action-sheet/test/index.spec.js b/src/action-sheet/test/index.spec.js index c185258b6..1a1803386 100644 --- a/src/action-sheet/test/index.spec.js +++ b/src/action-sheet/test/index.spec.js @@ -162,3 +162,15 @@ test('color option', () => { expect(wrapper).toMatchSnapshot(); }); + +test('description prop', () => { + const wrapper = mount(ActionSheet, { + propsData: { + value: true, + description: 'This is a description', + actions: [{ name: 'Option' }] + } + }); + + expect(wrapper).toMatchSnapshot(); +}); diff --git a/src/style/var.less b/src/style/var.less index 165d03510..2272ad806 100644 --- a/src/style/var.less +++ b/src/style/var.less @@ -49,6 +49,9 @@ @action-sheet-max-height: 90%; @action-sheet-header-height: 44px; @action-sheet-header-font-size: @font-size-lg; +@action-sheet-description-color: @gray-darker; +@action-sheet-description-font-size: @font-size-md; +@action-sheet-description-line-height: 20px; @action-sheet-item-height: 50px; @action-sheet-item-background: @white; @action-sheet-item-font-size: @font-size-lg;