zoukankan      html  css  js  c++  java
  • Elementui【tooltip】 在弹框关闭之后再次‘出现’的问题

    如图,第一次弹窗进来的时候,符合条件之后,这个提示文字的位置是对的,而且正常显示:

    现在点击取消按钮,第二次进入弹窗,如图,提示文字就跑到了左上角,而且输入符合条件的数值之后,会另外显示一个tooltip,这个提示会显示在正确的位置。

    好了,问题出现,就解决问题,看文档是有个 disable 属性的,表示该tooltip是否可用 ,那么就利用这个属性去控制tooltip的显示和隐藏,控制是否可用

    代码:

    <template v-if="lossRate(dataForm.list, item, 'january') > 100 && visible === true">
       <el-tooltip :disabled='mydisabled' popper-class='warningTip' class="item" effect="light" 
    :manual="true" :value="true" content="不允许超过100.00" placement="left-start"> <div>{{lossRate(dataForm.list, item, 'january')}}</div> </el-tooltip> </template>

    重点在于标红部分,设置动态的控制布尔值,并取消 mouseenter 和 mouseleave事件,即 :manual='true',绑定其:value='true' 保持当前的tooltip始终显示状态。

    mydisabled是自定义的布尔值,当关闭弹窗的时候,将mydisabled设置为true,当打开弹窗的时候设置为false即可。

    this.mydisable = true / false

    true表示不可用,false表示可用。

    结合文档理解使用即可。

  • 相关阅读:
    激活OFFICE2010时,提示choice.exe不是有效的win32程序
    Redis 学习之持久化机制、发布订阅、虚拟内存
    Redis 学习之事务处理
    Redis 学习之主从复制
    Redis 学习之常用命令及安全机制
    Redis 学习之数据类型
    Redis 学习之简介及安装
    Tomcat 虚拟主机配置
    mysql学习之权限管理
    mysql学习之主从复制
  • 原文地址:https://www.cnblogs.com/moutudou/p/15016820.html
Copyright © 2011-2022 走看看