diff --git a/src/popup/README.md b/src/popup/README.md index bd8bfe2a1..d809057eb 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -49,6 +49,17 @@ Use `position` prop to set popup display position /> ``` +### Close Icon + +```html + +``` + ### Round Corner ```html @@ -112,6 +123,7 @@ export default { | close-on-click-overlay | Whether to close when click overlay | *boolean* | `true` | - | | transition | Transition | *string* | `popup-slide` | - | | get-container | Return the mount node for Popup | *string \| () => HTMLElement* | - | - | +| closeable | Whether to show close icon | *boolean* | `false` | 2.2.0 | ### Events diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 3ac028b35..c0ce549c5 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -55,6 +55,19 @@ export default { /> ``` +### 关闭图标 + +设置`closeable`属性后，会在弹出层的右上角显示关闭图标 + +```html + +``` + ### 圆角弹窗 设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式 @@ -119,7 +132,8 @@ export default { | lock-scroll | 是否锁定背景滚动 | *boolean* | `true` | - | | lazy-render | 是否在显示弹层时才渲染节点 | *boolean* | `true` | - | | close-on-click-overlay | 是否在点击遮罩层后关闭 | *boolean* | `true` | - | -| transition | 动画类名，用法与 Vue 内置的`transtion`组件的`name`属性一致 | *string* | - | - | +| closeable | 是否显示关闭图标 | *boolean* | `false` | 2.2.0 | +| transition | 动画类名，用法与 Vue 原生`transtion`组件的`name`属性一致 | *string* | - | - | | get-container | 指定挂载的节点，可以传入选择器，
或一个返回节点的函数 | *string \| () => HTMLElement* | - | - | ### Events diff --git a/src/popup/demo/index.vue b/src/popup/demo/index.vue index e3dd0f379..31d650d72 100644 --- a/src/popup/demo/index.vue +++ b/src/popup/demo/index.vue @@ -1,109 +1,43 @@ @@ -119,7 +53,8 @@ export default { buttonLeft: '左侧弹出', buttonRight: '右侧弹出', getContainer: '指定挂载节点', - roundCorner: '圆角弹窗' + roundCorner: '圆角弹窗', + closeIcon: '关闭图标' }, 'en-US': { position: 'Position', @@ -129,7 +64,8 @@ export default { buttonLeft: 'From Left', buttonRight: 'From Right', getContainer: 'Get Container', - roundCorner: 'Round Corner' + roundCorner: 'Round Corner', + closeIcon: 'Close Icon' } }, @@ -140,6 +76,7 @@ export default { showBottom: false, showLeft: false, showRight: false, + showCloseIcon: false, showRoundCorner: false, showGetContainer: false }; diff --git a/src/popup/index.js b/src/popup/index.js index f1a1b23df..f26db4340 100644 --- a/src/popup/index.js +++ b/src/popup/index.js @@ -1,5 +1,6 @@ import { createNamespace, isDef } from '../utils'; import { PopupMixin } from '../mixins/popup'; +import Icon from '../icon'; const [createComponent, bem] = createNamespace('popup'); @@ -9,6 +10,7 @@ export default createComponent({ props: { round: Boolean, duration: Number, + closeable: Boolean, transition: String, position: { type: String, @@ -61,6 +63,9 @@ export default createComponent({ onClick={this.onClick} > {this.slots()} + {this.closeable && ( + + )} ); diff --git a/src/popup/index.less b/src/popup/index.less index 26c08085b..94e8aefe0 100644 --- a/src/popup/index.less +++ b/src/popup/index.less @@ -82,5 +82,13 @@ &-slide-left-leave-active { transform: translate3d(-100%, -50%, 0); } + + &__close-icon { + position: absolute; + top: 16px; + right: 16px; + color: @gray-dark; + font-size: 18px; + } } } diff --git a/src/popup/test/__snapshots__/demo.spec.js.snap b/src/popup/test/__snapshots__/demo.spec.js.snap index 32731277e..55c79d4bc 100644 --- a/src/popup/test/__snapshots__/demo.spec.js.snap +++ b/src/popup/test/__snapshots__/demo.spec.js.snap @@ -2,34 +2,23 @@ exports[`renders demo correctly 1`] = `
-
+
-
- +
+ -
- +
+
-
+
-
+
+ +
+
`; diff --git a/src/popup/test/index.spec.js b/src/popup/test/index.spec.js index 471bfc55f..25a015174 100644 --- a/src/popup/test/index.spec.js +++ b/src/popup/test/index.spec.js @@ -227,3 +227,15 @@ test('round prop', () => { expect(wrapper).toMatchSnapshot(); }); + +test('closeable prop', () => { + const wrapper = mount(Popup, { + propsData: { + value: true, + closeable: true + } + }); + + wrapper.find('.van-popup__close-icon').trigger('click'); + expect(wrapper.emitted('input')[0][0]).toEqual(false); +});