From 971b2188733cbeb3a618fa124c9a30793578078e Mon Sep 17 00:00:00 2001 From: neverland Date: Thu, 19 Sep 2019 17:14:14 +0800 Subject: [PATCH] feat(Popup): add close-icon-position prop (#4507) --- src/action-sheet/README.md | 2 +- src/action-sheet/README.zh-CN.md | 2 +- src/dialog/README.md | 4 +- src/dialog/README.zh-CN.md | 4 +- src/mixins/popup/type.ts | 2 +- src/popup/README.md | 16 +++-- src/popup/README.zh-CN.md | 18 ++++-- src/popup/demo/index.vue | 47 ++++++++------- src/popup/index.js | 6 +- src/popup/index.less | 22 ++++++- .../test/__snapshots__/demo.spec.js.snap | 60 +++++++++++++++---- .../test/__snapshots__/index.spec.js.snap | 2 +- src/sku/README.md | 2 +- src/sku/README.zh-CN.md | 2 +- src/toast/README.md | 2 +- src/toast/README.zh-CN.md | 2 +- types/dialog.d.ts | 2 +- types/toast.d.ts | 2 +- 18 files changed, 139 insertions(+), 58 deletions(-) diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index c81e039a8..b3dc110dd 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -105,7 +105,7 @@ export default { | lazy-render | Whether to lazy render util appeared | *boolean* | `true` | - | | lock-scroll | Whether to lock background scroll | *boolean* | `true` | - | | duration | Transition duration, unit second | *number* | `0.3` | 2.0.3 | -| get-container | Return the mount node for action-sheet | *string \| () => HTMLElement* | - | - | +| get-container | Return the mount node for action-sheet | *string \| () => Element* | - | - | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | - | ### Events diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index 5ede23096..1d02fe543 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -119,7 +119,7 @@ export default { | lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | - | | lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - | | duration | 动画时长，单位秒 | *number* | `0.3` | 2.0.3 | -| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => HTMLElement* | - | - | +| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => Element* | - | - | | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | - | ### Events diff --git a/src/dialog/README.md b/src/dialog/README.md index 8a5e0f91a..a353adda7 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -133,7 +133,7 @@ export default { | closeOnClickOverlay | Whether to close when click overlay | *boolean* | `false` | - | | lockScroll | Whether to lock body scroll | *boolean* | `true` | - | | beforeClose | Callback before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: Function) => void | - | - | -| getContainer | Return the mount node for Dialog | *string \| () => HTMLElement* | `body` | - | +| getContainer | Return the mount node for Dialog | *string \| () => Element* | `body` | - | ### Props @@ -154,7 +154,7 @@ export default { | close-on-click-overlay | Whether to close when click overlay | *boolean* | `false` | - | | lock-scroll | Whether to lock background scroll | *boolean* | `true` | - | | before-close | Callback before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: Function) => void | - | - | -| get-container | Return the mount node for Dialog | *string \| () => HTMLElement* | - | - | +| get-container | Return the mount node for Dialog | *string \| () => Element* | - | - | ### Events diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index 80e21522a..6287190b5 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -162,7 +162,7 @@ export default { | closeOnClickOverlay | 点击遮罩层时是否关闭弹窗 | *boolean* | `false` | - | | lockScroll | 是否锁定背景滚动 | *boolean* | `true` | - | | beforeClose | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - | -| getContainer | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => HTMLElement* | `body` | - | +| getContainer | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => Element* | `body` | - | ### Props @@ -185,7 +185,7 @@ export default { | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `false` | - | | lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - | | before-close | 关闭前的回调函数，
调用 done() 后关闭弹窗，
调用 done(false) 阻止弹窗关闭 | *(action, done) => void* | - | - | -| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => HTMLElement* | - | - | +| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => Element* | - | - | ### Events diff --git a/src/mixins/popup/type.ts b/src/mixins/popup/type.ts index dbde1cc66..5944f8932 100644 --- a/src/mixins/popup/type.ts +++ b/src/mixins/popup/type.ts @@ -1,4 +1,4 @@ -export type GetContainer = () => HTMLElement; +export type GetContainer = () => Element; export type PopupMixinProps = { value: boolean; diff --git a/src/popup/README.md b/src/popup/README.md index f30a69074..f666da1ee 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -14,9 +14,7 @@ Vue.use(Popup); ### Basic Usage ```html - - Show Popup - +Show Popup Content ``` @@ -67,6 +65,15 @@ Use `position` prop to set popup display position position="bottom" :style="{ height: '20%' }" /> + + + ``` ### Round Corner @@ -132,8 +139,9 @@ export default { | close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | - | | closeable | Whether to show close icon | *boolean* | `false` | 2.2.0 | | close-icon | Close icon name | *string* | `cross` | 2.2.0 | +| close-icon-position | Close Icon Position，can be set to `top-left` `bottom-left` `bottom-right` | *string* | `top-right` | 2.2.2 | | transition | Transition | *string* | `popup-slide` | - | -| get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - | +| get-container | Return the mount node for Popup | *string \| () => Element* | - | - | | safe-area-inset-bottom | Whether to enable bottom safe area adaptation | *boolean* | `false` | 2.2.1 | ### Events diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 3e32c8f6b..88e87f8c8 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -20,9 +20,7 @@ Vue.use(Popup); 通过`v-model`控制弹出层是否展示 ```html - - 展示弹出层 - +展示弹出层 内容 ``` @@ -57,7 +55,7 @@ export default { ### 关闭图标 -设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标 +设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置 ```html + + + ``` ### 圆角弹窗 @@ -143,8 +150,9 @@ export default { | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | - | | closeable | 是否显示关闭图标 | *boolean* | `false` | 2.2.0 | | close-icon | 关闭图标名称或图片链接 | *string* | `cross` | 2.2.0 | +| close-icon-position | 关闭图标位置，可选值为`top-left` `bottom-left` `bottom-right` | *string* | `top-right` | 2.2.2 | | transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - | -| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => HTMLElement* | - | - | +| get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => Element* | - | - | | safe-area-inset-bottom | 是否开启底部安全区适配，[详细说明](#/zh-CN/quickstart#di-bu-an-quan-qu-gua-pei) | *boolean* | `false` | 2.2.1 | ### Events diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue index 10d1298b2..11c81a418 100644 --- a/src/popup/demo/index.vue +++ b/src/popup/demo/index.vue @@ -1,35 +1,28 @@