blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat(Popover): add trigger prop (#7646)

Browse Source
This commit is contained in:
neverland 2020-11-26 20:31:38 +08:00 committed by GitHub
parent d3f38c29f9
commit 7e4ff3b667
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 81 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/popover/README.md
View File

@ -14,9 +14,14 @@ Vue.use(Popover);
### Basic Usage ### Basic Usage
```html ```html
<van-popover v-model="showPopover" :actions="actions" @select="onSelect"> <van-popover
v-model="showPopover"
trigger="click"
:actions="actions"
@select="onSelect"
>
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
Light Theme Light Theme
</van-button> </van-button>
</template> </template>
@ -50,9 +55,14 @@ export default {
Using the `theme` prop to change the style of Popover. Using the `theme` prop to change the style of Popover.
```html ```html
<van-popover v-model="showPopover" theme="dark" :actions="actions"> <van-popover
v-model="showPopover"
theme="dark"
trigger="click"
:actions="actions"
>
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
Dark Theme Dark Theme
</van-button> </van-button>
</template> </template>
@ -100,9 +110,9 @@ bottom-end # Bottom right
### Show Icon ### Show Icon
```html ```html
<van-popover v-model="showPopover" :actions="actions"> <van-popover v-model="showPopover" trigger="click" :actions="actions">
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
Show Icon Show Icon
</van-button> </van-button>
</template> </template>
@ -129,9 +139,9 @@ export default {
Using the `disabled` option to disable an action. Using the `disabled` option to disable an action.
```html ```html
<van-popover v-model="showPopover" :actions="actions"> <van-popover v-model="showPopover" trigger="click" :actions="actions">
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
Disable Action Disable Action
</van-button> </van-button>
</template> </template>
@ -163,6 +173,7 @@ export default {
| actions | Actions | _Action[]_ | `[]` | | actions | Actions | _Action[]_ | `[]` |
| placement | Placement | _string_ | `bottom` | | placement | Placement | _string_ | `bottom` |
| theme | Theme，can be set to `dark` | _string_ | `light` | | theme | Theme，can be set to `dark` | _string_ | `light` |
| trigger `v2.11.1` | Trigger mode，can be set to `click` | - |
| offset | Distance to reference | _[number, number]_ | `[0, 8]` | | offset | Distance to reference | _[number, number]_ | `[0, 8]` |
| overlay | Whether to show overlay | _boolean_ | `false` | | overlay | Whether to show overlay | _boolean_ | `false` |
| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` | | close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |

31
src/popover/README.zh-CN.md
View File

@ -20,9 +20,14 @@ Vue.use(Popover);
当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。 当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
```html ```html
<van-popover v-model="showPopover" :actions="actions" @select="onSelect"> <van-popover
v-model="showPopover"
trigger="click"
:actions="actions"
@select="onSelect"
>
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
浅色风格 浅色风格
</van-button> </van-button>
</template> </template>
@ -53,9 +58,14 @@ export default {
Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。 Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
```html ```html
<van-popover v-model="showPopover" theme="dark" :actions="actions"> <van-popover
v-model="showPopover"
theme="dark"
trigger="click"
:actions="actions"
>
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
深色风格 深色风格
</van-button> </van-button>
</template> </template>
@ -103,9 +113,9 @@ bottom-end # 底部右侧位置
在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。 在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
```html ```html
<van-popover v-model="showPopover" :actions="actions"> <van-popover v-model="showPopover" trigger="click" :actions="actions">
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
展示图标 展示图标
</van-button> </van-button>
</template> </template>
@ -132,9 +142,9 @@ export default {
在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。 在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
```html ```html
<van-popover v-model="showPopover" :actions="actions"> <van-popover v-model="showPopover" trigger="click" :actions="actions">
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
禁用选项 禁用选项
</van-button> </van-button>
</template> </template>
@ -161,7 +171,7 @@ export default {
通过默认插槽，可以在 Popover 内部放置任意内容。 通过默认插槽，可以在 Popover 内部放置任意内容。
```html ```html
<van-popover v-model="showPopover"> <van-popover v-model="showPopover" trigger="click">
<van-grid <van-grid
square square
clickable clickable
@ -178,7 +188,7 @@ export default {
/> />
</van-grid> </van-grid>
<template #reference> <template #reference>
<van-button type="primary" @click="showPopover = true"> <van-button type="primary">
自定义内容 自定义内容
</van-button> </van-button>
</template> </template>
@ -205,6 +215,7 @@ export default {
| actions | 选项列表 | _Action[]_ | `[]` | | actions | 选项列表 | _Action[]_ | `[]` |
| placement | 弹出位置 | _string_ | `bottom` | | placement | 弹出位置 | _string_ | `bottom` |
| theme | 主题风格，可选值为 `dark` | _string_ | `light` | | theme | 主题风格，可选值为 `dark` | _string_ | `light` |
| trigger `v2.11.1` | 触发方式，可选值为 `click` | - |
| offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` | | offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
| overlay | 是否显示遮罩层 | _boolean_ | `false` | | overlay | 是否显示遮罩层 | _boolean_ | `false` |
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` | | close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |

18
src/popover/demo/index.vue
View File

@ -3,13 +3,14 @@
<demo-block :title="t('basicUsage')"> <demo-block :title="t('basicUsage')">
<van-popover <van-popover
v-model="show.lightTheme" v-model="show.lightTheme"
trigger="click"
:actions="t('actions')" :actions="t('actions')"
placement="bottom-start" placement="bottom-start"
style="margin-left: 16px;" style="margin-left: 16px;"
@select="onSelect" @select="onSelect"
> >
<template #reference> <template #reference>
<van-button type="primary" @click="show.lightTheme = true"> <van-button type="primary">
{{ t('lightTheme') }} {{ t('lightTheme') }}
</van-button> </van-button>
</template> </template>
@ -17,12 +18,13 @@
<van-popover <van-popover
v-model="show.darkTheme" v-model="show.darkTheme"
theme="dark" theme="dark"
trigger="click"
:actions="t('actions')" :actions="t('actions')"
style="margin-left: 16px;" style="margin-left: 16px;"
@select="onSelect" @select="onSelect"
> >
<template #reference> <template #reference>
<van-button type="primary" @click="show.darkTheme = true"> <van-button type="primary">
{{ t('darkTheme') }} {{ t('darkTheme') }}
</van-button> </van-button>
</template> </template>
@ -48,6 +50,7 @@
<van-popover <van-popover
v-model="show.placement" v-model="show.placement"
theme="dark" theme="dark"
trigger="click"
:actions="t('shortActions')" :actions="t('shortActions')"
:placement="currentPlacement" :placement="currentPlacement"
@select="onSelect" @select="onSelect"
@ -64,13 +67,14 @@
<demo-block :title="t('actionOptions')"> <demo-block :title="t('actionOptions')">
<van-popover <van-popover
v-model="show.showIcon" v-model="show.showIcon"
trigger="click"
:actions="t('actionsWithIcon')" :actions="t('actionsWithIcon')"
placement="bottom-start" placement="bottom-start"
style="margin-left: 16px;" style="margin-left: 16px;"
@select="onSelect" @select="onSelect"
> >
<template #reference> <template #reference>
<van-button type="primary" @click="show.showIcon = true"> <van-button type="primary">
{{ t('showIcon') }} {{ t('showIcon') }}
</van-button> </van-button>
</template> </template>
@ -78,12 +82,13 @@
<van-popover <van-popover
v-model="show.disableAction" v-model="show.disableAction"
trigger="click"
:actions="t('actionsDisabled')" :actions="t('actionsDisabled')"
style="margin-left: 16px;" style="margin-left: 16px;"
@select="onSelect" @select="onSelect"
> >
<template #reference> <template #reference>
<van-button type="primary" @click="show.disableAction = true"> <van-button type="primary">
{{ t('disableAction') }} {{ t('disableAction') }}
</van-button> </van-button>
</template> </template>
@ -93,6 +98,7 @@
<demo-block :title="t('customContent')"> <demo-block :title="t('customContent')">
<van-popover <van-popover
v-model="show.customContent" v-model="show.customContent"
trigger="click"
placement="top-start" placement="top-start"
style="margin-left: 16px;" style="margin-left: 16px;"
@select="onSelect" @select="onSelect"
@ -113,7 +119,7 @@
/> />
</van-grid> </van-grid>
<template #reference> <template #reference>
<van-button type="primary" @click="show.customContent = true"> <van-button type="primary">
{{ t('customContent') }} {{ t('customContent') }}
</van-button> </van-button>
</template> </template>
@ -190,7 +196,7 @@ export default {
disableAction: false, disableAction: false,
}, },
showPicker: false, showPicker: false,
currentPlacement: '', currentPlacement: 'top',
placements: [ placements: [
'top', 'top',
'top-start', 'top-start',

9
src/popover/index.js
View File

@ -21,6 +21,7 @@ export default createComponent({
props: { props: {
value: Boolean, value: Boolean,
trigger: String,
overlay: Boolean, overlay: Boolean,
offset: { offset: {
type: Array, type: Array,
@ -120,6 +121,12 @@ export default createComponent({
this.$emit('input', value); this.$emit('input', value);
}, },
onClickWrapper() {
if (this.trigger === 'click') {
this.onToggle(!this.value);
}
},
onTouchstart(event) { onTouchstart(event) {
event.stopPropagation(); event.stopPropagation();
this.$emit('touchstart', event); this.$emit('touchstart', event);
@ -162,7 +169,7 @@ export default createComponent({
render() { render() {
return ( return (
<span ref="wrapper" class={bem('wrapper')}> <span ref="wrapper" class={bem('wrapper')} onClick={this.onClickWrapper}>
<Popup <Popup
ref="popover" ref="popover"
value={this.value} value={this.value}

6
src/popover/test/__snapshots__/index.spec.js.snap
View File

@ -9,21 +9,21 @@ exports[`should allow to custom the className of action 1`] = `
exports[`should locate to reference element when showed 1`] = `<!---->`; exports[`should locate to reference element when showed 1`] = `<!---->`;
exports[`should locate to reference element when showed 2`] = ` exports[`should locate to reference element when showed 2`] = `
<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006;" data-popper-placement="bottom"> <div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2007;" data-popper-placement="bottom">
<div class="van-popover__arrow"></div> <div class="van-popover__arrow"></div>
<div class="van-popover__content"></div> <div class="van-popover__content"></div>
</div> </div>
`; `;
exports[`should locate to reference element when showed 3`] = ` exports[`should locate to reference element when showed 3`] = `
<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2006; display: none;" data-popper-placement="bottom"> <div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="position: absolute; left: 0px; top: 8px; margin: 0px; z-index: 2007; display: none;" data-popper-placement="bottom">
<div class="van-popover__arrow"></div> <div class="van-popover__arrow"></div>
<div class="van-popover__content"></div> <div class="van-popover__content"></div>
</div> </div>
`; `;
exports[`should watch placement prop and update location 1`] = ` exports[`should watch placement prop and update location 1`] = `
<div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2007; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top"> <div class="van-popup van-popover van-popover--light" name="van-popover-zoom" style="z-index: 2008; position: absolute; left: 0px; top: -8px; margin: 0px;" data-popper-placement="top">
<div class="van-popover__arrow"></div> <div class="van-popover__arrow"></div>
<div class="van-popover__content"></div> <div class="van-popover__content"></div>
</div> </div>

18
src/popover/test/index.spec.js
View File

@ -7,6 +7,24 @@ const baseActions = [
{ text: 'Option 3' }, { text: 'Option 3' },
]; ];
test('should toggle popover when trigger is "click" and the reference element is clicked', () => {
const wrapper = mount(Popover, {
propsData: {
value: true,
},
scopedSlots: {
reference: '<div class="reference"></div>',
},
});
wrapper.find('.reference').trigger('click');
expect(wrapper.emitted('input')).toBeFalsy();
wrapper.setProps({ trigger: 'click' });
wrapper.find('.reference').trigger('click');
expect(wrapper.emitted('input')[0][0]).toEqual(false);
});
test('should emit select event when clicking the action', () => { test('should emit select event when clicking the action', () => {
const wrapper = mount(Popover, { const wrapper = mount(Popover, {
propsData: { propsData: {