From cb47f2bbd120fd464410dc4275492cf23f5a53e6 Mon Sep 17 00:00:00 2001 From: chenjiahan Date: Thu, 19 Nov 2020 20:54:25 +0800 Subject: [PATCH] feat(Popover): add default slot --- src/popover/README.md | 47 +++++++++-------- src/popover/README.zh-CN.md | 76 ++++++++++++++++++++------- src/popover/demo/index.vue | 102 ++++++++++++++++++++++-------------- src/popover/index.js | 12 +++-- src/popover/index.less | 19 +++++-- 5 files changed, 166 insertions(+), 90 deletions(-) diff --git a/src/popover/README.md b/src/popover/README.md index 27ea687f2..284dda82b 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -67,6 +67,29 @@ export default { }; ``` +### Placement + +```html + +``` + +`placement` supports the following values: + +```bash +top # Top middle +top-start # Top left +top-end # Top right +left # Left middle +left-start # Left top +left-end # Left bottom +right # Right middle +right-start # Right top +right-end # Right bottom +bottom # Bottom middle +bottom-start # Bottom left +bottom-end # Bottom right +``` + ### Show Icon ```html @@ -123,29 +146,6 @@ export default { }; ``` -### Placement - -```html - -``` - -`placement` supports the following values: - -```bash -top # Top middle -top-start # Top left -top-end # Top right -left # Left middle -left-start # Left top -left-end # Left bottom -right # Right middle -right-start # Right top -right-end # Right bottom -bottom # Bottom middle -bottom-start # Bottom left -bottom-end # Bottom right -``` - ## API ### Props @@ -184,4 +184,5 @@ bottom-end # Bottom right | Name | Description | | --------- | ----------------- | +| default | Custom content | | reference | Reference Element | diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index 8916ac483..6b92d0d4a 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -66,6 +66,31 @@ export default { }; ``` +### 弹出位置 + +通过 `placement` 属性来控制气泡的弹出位置。 + +```html + +``` + +`placement` 支持以下值： + +```bash +top # 顶部中间位置 +top-start # 顶部左侧位置 +top-end # 顶部右侧位置 +left # 左侧中间位置 +left-start # 左侧上方位置 +left-end # 左侧下方位置 +right # 右侧中间位置 +right-start # 右侧上方位置 +right-end # 右侧下方位置 +bottom # 底部中间位置 +bottom-start # 底部左侧位置 +bottom-end # 底部右侧位置 +``` + ### 展示图标 在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。 @@ -124,29 +149,43 @@ export default { }; ``` -### 弹出位置 +### 自定义内容 -通过 `placement` 属性来控制气泡的弹出位置。 +通过默认插槽，可以在 Popover 内部放置任意内容。 ```html - + + + + + + ``` -`placement` 支持以下值： - -```bash -top # 顶部中间位置 -top-start # 顶部左侧位置 -top-end # 顶部右侧位置 -left # 左侧中间位置 -left-start # 左侧上方位置 -left-end # 左侧下方位置 -right # 右侧中间位置 -right-start # 右侧上方位置 -right-end # 右侧下方位置 -bottom # 底部中间位置 -bottom-start # 底部左侧位置 -bottom-end # 底部右侧位置 +```js +export default { + data() { + return { + showPopover: false, + }; + }, +}; ``` ## API @@ -189,4 +228,5 @@ bottom-end # 底部右侧位置 | 名称 | 说明 | | --------- | --------------------------- | +| default | 自定义菜单内容 | | reference | 触发 Popover 显示的元素内容 | diff --git a/src/popover/demo/index.vue b/src/popover/demo/index.vue index 69ce4f1c6..c279f6af0 100644 --- a/src/popover/demo/index.vue +++ b/src/popover/demo/index.vue @@ -27,6 +27,36 @@ + + + + +
+ + + +
+ + + + - - - - + - - - -
- - - -
+ + + + @@ -116,6 +137,7 @@ export default { lightTheme: '浅色风格', showPopover: '点击弹出气泡', actionOptions: '选项配置', + customContent: '自定义内容', disableAction: '禁用选项', choosePlacement: '选择弹出位置', }, @@ -142,6 +164,7 @@ export default { lightTheme: 'Light Theme', showPopover: 'Show Popover', actionOptions: 'Action Options', + customContent: 'Custom Content', disableAction: 'Disable Action', choosePlacement: 'Placement', }, @@ -154,6 +177,7 @@ export default { placement: false, darkTheme: false, lightTheme: false, + customContent: false, disableAction: false, }, showPicker: false, @@ -176,13 +200,11 @@ export default { }, methods: { - onConfirm(value) { - this.showPicker = false; - this.currentPlacement = value; - + onPickerChange(picker, value) { setTimeout(() => { this.show.placement = true; - }, 300); + this.currentPlacement = value; + }); }, }, }; @@ -209,7 +231,7 @@ export default { &-box { display: flex; justify-content: center; - margin: 110px 0 80px; + margin: 110px 0; } } diff --git a/src/popover/index.js b/src/popover/index.js index d07482f1f..3b5c35f67 100644 --- a/src/popover/index.js +++ b/src/popover/index.js @@ -15,7 +15,7 @@ const [createComponent, bem] = createNamespace('popover'); export default createComponent({ mixins: [ ClickOutsideMixin({ - event: 'click', + event: 'touchstart', method: 'onClickOutside', }), ], @@ -129,9 +129,9 @@ export default createComponent({ this.$emit('input', value); }, - onClick(event) { + onTouchstart(event) { event.stopPropagation(); - this.$emit('click', event); + this.$emit('touchstart', event); }, onClickAction(action, index) { @@ -180,14 +180,16 @@ export default createComponent({ lockScroll={false} getContainer={this.getContainer} onOpen={this.onOpen} - onClick={this.onClick} onClose={this.onClose} onInput={this.onToggle} onOpened={this.onOpened} onClosed={this.onClosed} + nativeOnTouchstart={this.onTouchstart} >
- {this.actions.map(this.renderAction)} +
+ {this.slots('default') || this.actions.map(this.renderAction)} +
{this.slots('reference')} diff --git a/src/popover/index.less b/src/popover/index.less index 59a4a1685..7c81be84d 100644 --- a/src/popover/index.less +++ b/src/popover/index.less @@ -4,7 +4,7 @@ .van-popover { position: absolute; overflow: visible; - border-radius: @border-radius-lg; + background-color: transparent; transition: opacity 0.15s, transform 0.15s; &__wrapper { @@ -20,6 +20,11 @@ border-width: 6px; } + &__content { + overflow: hidden; + border-radius: @border-radius-lg; + } + &__action { position: relative; display: flex; @@ -191,8 +196,11 @@ &--light { color: @text-color; - background-color: @white; - box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12); + + .van-popover__content { + background-color: @white; + box-shadow: 0 2px 12px rgba(50, 50, 51, 0.12); + } .van-popover__arrow { color: @white; @@ -215,7 +223,10 @@ &--dark { color: @white; - background-color: #4a4a4a; + + .van-popover__content { + background-color: #4a4a4a; + } .van-popover__arrow { color: #4a4a4a;