[英]Popper.js how to enable it on click
I need to make a generic popover component for displaying things like filters and menus in an element over the page.我需要制作一个通用的弹出框组件,用于在页面上的元素中显示过滤器和菜单等内容。 For that I am using Popper.js
为此,我正在使用 Popper.js
How to enable popover on users click?如何在用户点击时启用弹出框? I did not see any "close" and "popup" methods in Popper.js object.
我在 Popper.js object 中没有看到任何“关闭”和“弹出”方法。 Popover component should be triggered clicking on button or hover on a element.
Popover 组件应该被触发单击按钮或元素上的 hover。
to open Popover element I shoud use in parent component this打开我应该在父组件中使用的 Popover 元素
<ci-popover>
<template
slot-scope="popover"
#action
>
<ci-button @click="popover.toggle()">
Open Popover
</ci-button>
</template>
<!-- Popover content -->
</ci-popover>
Popover component弹出框组件
<template>
<div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-divider--padding-${padding}`]">
<div ref="button">
<slot name="action" :toggle="toggle" :close="close"></slot>
</div>
<div ref="tooltip">
<h1>Hello popover</h1>
</div>
</div>
</template>
<script lang="ts">
/*some imports*/
import { createPopper, Instance } from '@popperjs/core';
@Component
export default class CiPopover extends Vue {
/*Props*/
created() {
this.onOpen();
}
beforeDestroy() {
this.onClose();
}
public close(): void {
console.log('close method');
}
public toggle(): void {
console.log('toggle method');//shoud "trigger" popover to show
}
@Emit('open')
onOpen() {
console.log("emit:open")
}
@Emit('close')
onClose() {
console.log("emit:close");
}
popperInstance = null as Instance | null
mounted() {
this.popperInstance = createPopper(this.$refs.button, this.$refs.tooltip, {
placement: 'top',
});
}
}
</script>
<ci-popover variant="emphasis"
padding="md"
placement="top"
@open="ciPopoverOnOpen"
@close="ciPopoverOnClose">
<template slot-scope="popover" slot="action">
<ci-button @click="popover.toggle()">
Open Popover
</ci-button>
<ci-button @click="popover.close()">
Close popover
</ci-button>
</template>
<!-- Popover content -->
</ci-popover>
It looks like you are using popper.js and so my answer will be based on that library.看起来您正在使用popper.js ,所以我的答案将基于该库。
I did not see any "close" and "popup" methods in Popper.js object.
我在 Popper.js object 中没有看到任何“关闭”和“弹出”方法。
It does not have show/hide methods because it is only a positioning engine.它没有显示/隐藏方法,因为它只是一个定位引擎。
It does however have method for updating/destroying an instance.然而,它确实有更新/销毁实例的方法。
Popover component should be triggered clicking on button or hover on a element.
Popover 组件应该被触发单击按钮或元素上的 hover。
You can just instead create an instance when you click/hover an element then.然后,您可以在单击/悬停元素时创建一个实例。
<template>
<div>
<div ref="reference">
Something
</div>
<button
ref="button"
@click="onButtonClick"
>
Trigger
</button>
</div>
</template>
<script>
import { createPopper } from "@popperjs/core";
export default {
data() {
return {
popper: null,
}
},
methods: {
onButtonClick() {
if (this.popper === null) {
this.popper = createPopper(this.$refs.button, this.$refs.reference, { ...yourOptions })
} else {
this.popper.destroy()
this.popper = null
}
}
},
beforeDestroy() {
if (this.popper !== null) {
this.popper.destroy()
}
}
}
</script>
You might get away with just using one instance of popper instead of creating/destroying always but that's for you to decide and to figure out.您可能只使用一个 popper 实例而不是总是创建/销毁,但这是由您决定和弄清楚的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.