mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
feat(Popover): add trigger prop (#7646)
This commit is contained in:
neverland
GitHub
parent
d3f38c29f9
commit
7e4ff3b667
@ -14,9 +14,14 @@ Vue.use(Popover);
|
||||
### Basic Usage
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
|
||||
<van-popover
|
||||
v-model="showPopover"
|
||||
trigger="click"
|
||||
:actions="actions"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
Light Theme
|
||||
</van-button>
|
||||
</template>
|
||||
@ -50,9 +55,14 @@ export default {
|
||||
Using the `theme` prop to change the style of Popover.
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" theme="dark" :actions="actions">
|
||||
<van-popover
|
||||
v-model="showPopover"
|
||||
theme="dark"
|
||||
trigger="click"
|
||||
:actions="actions"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
Dark Theme
|
||||
</van-button>
|
||||
</template>
|
||||
@ -100,9 +110,9 @@ bottom-end # Bottom right
|
||||
### Show Icon
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model="showPopover" trigger="click" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
Show Icon
|
||||
</van-button>
|
||||
</template>
|
||||
@ -129,9 +139,9 @@ export default {
|
||||
Using the `disabled` option to disable an action.
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model="showPopover" trigger="click" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
Disable Action
|
||||
</van-button>
|
||||
</template>
|
||||
@ -163,6 +173,7 @@ export default {
|
||||
| actions | Actions | _Action[]_ | `[]` |
|
||||
| placement | Placement | _string_ | `bottom` |
|
||||
| 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]` |
|
||||
| overlay | Whether to show overlay | _boolean_ | `false` |
|
||||
| close-on-click-action | Whether to close when clicking action | _boolean_ | `true` |
|
||||
|
||||
@ -20,9 +20,14 @@ Vue.use(Popover);
|
||||
当 Popover 弹出时，会基于 `reference` 插槽的内容进行定位。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions" @select="onSelect">
|
||||
<van-popover
|
||||
v-model="showPopover"
|
||||
trigger="click"
|
||||
:actions="actions"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
浅色风格
|
||||
</van-button>
|
||||
</template>
|
||||
@ -53,9 +58,14 @@ export default {
|
||||
Popover 支持浅色和深色两种风格，默认为浅色风格，将 `theme` 属性设置为 `dark` 可切换为深色风格。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" theme="dark" :actions="actions">
|
||||
<van-popover
|
||||
v-model="showPopover"
|
||||
theme="dark"
|
||||
trigger="click"
|
||||
:actions="actions"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
深色风格
|
||||
</van-button>
|
||||
</template>
|
||||
@ -103,9 +113,9 @@ bottom-end # 底部右侧位置
|
||||
在 `actions` 数组中，可以通过 `icon` 字段来定义选项的图标，支持传入[图标名称](#/zh-CN/icon)或图片链接。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model="showPopover" trigger="click" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
展示图标
|
||||
</van-button>
|
||||
</template>
|
||||
@ -132,9 +142,9 @@ export default {
|
||||
在 `actions` 数组中，可以通过 `disabled` 字段来禁用某个选项。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover" :actions="actions">
|
||||
<van-popover v-model="showPopover" trigger="click" :actions="actions">
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
禁用选项
|
||||
</van-button>
|
||||
</template>
|
||||
@ -161,7 +171,7 @@ export default {
|
||||
通过默认插槽，可以在 Popover 内部放置任意内容。
|
||||
|
||||
```html
|
||||
<van-popover v-model="showPopover">
|
||||
<van-popover v-model="showPopover" trigger="click">
|
||||
<van-grid
|
||||
square
|
||||
clickable
|
||||
@ -178,7 +188,7 @@ export default {
|
||||
/>
|
||||
</van-grid>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="showPopover = true">
|
||||
<van-button type="primary">
|
||||
自定义内容
|
||||
</van-button>
|
||||
</template>
|
||||
@ -205,6 +215,7 @@ export default {
|
||||
| actions | 选项列表 | _Action[]_ | `[]` |
|
||||
| placement | 弹出位置 | _string_ | `bottom` |
|
||||
| theme | 主题风格，可选值为 `dark` | _string_ | `light` |
|
||||
| trigger `v2.11.1` | 触发方式，可选值为 `click` | - |
|
||||
| offset | 出现位置的偏移量 | _[number, number]_ | `[0, 8]` |
|
||||
| overlay | 是否显示遮罩层 | _boolean_ | `false` |
|
||||
| close-on-click-action | 是否在点击选项后关闭 | _boolean_ | `true` |
|
||||
|
||||
@ -3,13 +3,14 @@
|
||||
<demo-block :title="t('basicUsage')">
|
||||
<van-popover
|
||||
v-model="show.lightTheme"
|
||||
trigger="click"
|
||||
:actions="t('actions')"
|
||||
placement="bottom-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.lightTheme = true">
|
||||
<van-button type="primary">
|
||||
{{ t('lightTheme') }}
|
||||
</van-button>
|
||||
</template>
|
||||
@ -17,12 +18,13 @@
|
||||
<van-popover
|
||||
v-model="show.darkTheme"
|
||||
theme="dark"
|
||||
trigger="click"
|
||||
:actions="t('actions')"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.darkTheme = true">
|
||||
<van-button type="primary">
|
||||
{{ t('darkTheme') }}
|
||||
</van-button>
|
||||
</template>
|
||||
@ -48,6 +50,7 @@
|
||||
<van-popover
|
||||
v-model="show.placement"
|
||||
theme="dark"
|
||||
trigger="click"
|
||||
:actions="t('shortActions')"
|
||||
:placement="currentPlacement"
|
||||
@select="onSelect"
|
||||
@ -64,13 +67,14 @@
|
||||
<demo-block :title="t('actionOptions')">
|
||||
<van-popover
|
||||
v-model="show.showIcon"
|
||||
trigger="click"
|
||||
:actions="t('actionsWithIcon')"
|
||||
placement="bottom-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.showIcon = true">
|
||||
<van-button type="primary">
|
||||
{{ t('showIcon') }}
|
||||
</van-button>
|
||||
</template>
|
||||
@ -78,12 +82,13 @@
|
||||
|
||||
<van-popover
|
||||
v-model="show.disableAction"
|
||||
trigger="click"
|
||||
:actions="t('actionsDisabled')"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.disableAction = true">
|
||||
<van-button type="primary">
|
||||
{{ t('disableAction') }}
|
||||
</van-button>
|
||||
</template>
|
||||
@ -93,6 +98,7 @@
|
||||
<demo-block :title="t('customContent')">
|
||||
<van-popover
|
||||
v-model="show.customContent"
|
||||
trigger="click"
|
||||
placement="top-start"
|
||||
style="margin-left: 16px;"
|
||||
@select="onSelect"
|
||||
@ -113,7 +119,7 @@
|
||||
/>
|
||||
</van-grid>
|
||||
<template #reference>
|
||||
<van-button type="primary" @click="show.customContent = true">
|
||||
<van-button type="primary">
|
||||
{{ t('customContent') }}
|
||||
</van-button>
|
||||
</template>
|
||||
@ -190,7 +196,7 @@ export default {
|
||||
disableAction: false,
|
||||
},
|
||||
showPicker: false,
|
||||
currentPlacement: '',
|
||||
currentPlacement: 'top',
|
||||
placements: [
|
||||
'top',
|
||||
'top-start',
|
||||
|
||||
@ -21,6 +21,7 @@ export default createComponent({
|
||||
|
||||
props: {
|
||||
value: Boolean,
|
||||
trigger: String,
|
||||
overlay: Boolean,
|
||||
offset: {
|
||||
type: Array,
|
||||
@ -120,6 +121,12 @@ export default createComponent({
|
||||
this.$emit('input', value);
|
||||
},
|
||||
|
||||
onClickWrapper() {
|
||||
if (this.trigger === 'click') {
|
||||
this.onToggle(!this.value);
|
||||
}
|
||||
},
|
||||
|
||||
onTouchstart(event) {
|
||||
event.stopPropagation();
|
||||
this.$emit('touchstart', event);
|
||||
@ -162,7 +169,7 @@ export default createComponent({
|
||||
|
||||
render() {
|
||||
return (
|
||||
<span ref="wrapper" class={bem('wrapper')}>
|
||||
<span ref="wrapper" class={bem('wrapper')} onClick={this.onClickWrapper}>
|
||||
<Popup
|
||||
ref="popover"
|
||||
value={this.value}
|
||||
|
||||
@ -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 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__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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__content"></div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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__content"></div>
|
||||
</div>
|
||||
|
||||
@ -7,6 +7,24 @@ const baseActions = [
|
||||
{ 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', () => {
|
||||
const wrapper = mount(Popover, {
|
||||
propsData: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user