element-ui MessageBox 和 Tooltip一起使用的bug

使用Tooltip组件包裹的元素触发MessageBox弹窗在关闭弹窗时会导致Tooltip状态可见。

解决方法:

  1. manual属性设置为true把Tooltip改为手动控制模式
  2. v-model控制状态是否可见
  3. native和prevent修饰符监听mouseenter和mouseleave事件

具体代码如下:

 1 <template>
 2     <el-tooltip
 3           effect="light"
 4           lacement="bottom"
 5           :manual="true"
 6           v-model="isShow"
 7           @mouseenter.native.prevent="put"
 8           @mouseleave.native.prevent="leave"      
 9     >
10     </el-tooltip>
11 </template>
12 <script>
13 export default {
14     methods: {
15         put() {
16           this.isShow = true;
17         },
18         leave() {
19           this.isShow = false;
20         }
21     }
22 }
23 </script>

 

上一篇:echarts tooltip显示位置设置


下一篇:echarts中单个设置tooltip