使用Tooltip组件包裹的元素触发MessageBox弹窗在关闭弹窗时会导致Tooltip状态可见。
解决方法:
- manual属性设置为true把Tooltip改为手动控制模式
- v-model控制状态是否可见
- 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>