vue3 点击空白处关闭弹框
写一个控制弹框出现的方法 用popoverFlag变量控制const popoverFlag= ref(false)const popoverShow = () => {chartState.getData(0)popoverFlag.value = true}html在弹框和按钮处加一个@click.stop就相当于点击除了弹框和按钮的地方其他的地方都会关闭弹框<div:class=
·
写一个控制弹框出现的方法 用popoverFlag变量控制
const popoverFlag= ref(false)
const popoverShow = () => {
chartState.getData(0)
popoverFlag.value = true
}
html
在弹框和按钮处加一个@click.stop
就相当于点击除了弹框和按钮的地方其他的地方都会关闭弹框
<div
:class="['btn', 'btn-inner', popoverFlag && 'popverActive']"
@click="popoverShow()"
@click.stop
></div>
<transition name="opa-fade">
<div
:class="[
'table-wrapper',
popoverFlag && 'tableInner',
]"
v-if="popoverFlag"
@click.stop
>
</div>
</transition>
Vue3用的是onMounted和onUnmounted
onMounted(() => {
window.addEventListener('click', chartState.closeTable)
})
onUnmounted(() => {
window.removeEventListener('click', chartState.closeTable)
})//chartState.closeTable就是关闭弹框的方法
附:
直接关闭会太生硬
加上一个transition 让他渐变出现和消失
.opa-fade-enter-active,
.opa-fade-leave-active {
transition: all 0.5s ease;
}
.opa-fade-enter-from,
.opa-fade-leave-to {
opacity: 0;
}
更多推荐
已为社区贡献2条内容
所有评论(0)