el-tooltip中 content点击事件 弹窗闪烁引发的思考

废话不多说上代码
const visible = ref(false);

<el-tooltip

v-model:visible="visible"

:teleported="false"

:show-arrow="false"

effect="light"

trigger="click"

placement="right-start"

popper-class="express-tooltip"

>

<div

@click.stop="visible = true"

>

</div>

<template #content>

<div>弹窗内容</div>

</template>

</el-tooltip>

在说这个问题之前一定要了解v-model:visible 和 :visible的区别
v-model的这种方式  可以实现双向绑定，同时 子组件也可以对应的值，但是呢 :visible就只能进行单向操作，只能改变父组件的值。
所以，添加了点击事件之后就会改了visible的值之后，v-model:visible也会改变一次，所以就导致弹窗会闪烁一下。

所以 解决办法就出来了：

两种方式：
        1、 v-model:visible  改成 :visible
        2、去掉点击事件
如果问题，可以留言再讨论
满意的点个赞👍🏻