el-button禁用后,按钮上el-tooltip的内容无法触发的问题

问题描述

页面上有一个编辑按钮,当按钮禁用时,鼠标hover按钮时,tooltip显示不能编辑的原因。但在一些同事的chrome浏览器上查看的时候,发现hover按钮时,tooltip没有显示出来。代码如下:

<el-tooltip :disabled="editFlag=== 'Y'">
  <span slot="content">不能编辑的原因</span>
  <el-button
    :disabled="editFlag !== 'Y'"
    @click="handleEdit"
  >
    编辑
  </el-button>
</el-tooltip>

初步解决方案

观察发现同事的chrome版本较低,进行升级后,页面能正常显示。

查找原因及解决方法

通过百度,发现问题出现的主要原因是:el-button disbled的时候,影响到了el-tooltip。所以通过对el-button包裹一层div能够解决该问题。代码如下:

<el-tooltip :disabled="editFlag=== 'Y'">
  <span slot="content">不能编辑的原因</span>
  <div>
    <el-button
      :disabled="editFlag !== 'Y'"
      @click="handleEdit"
    >
      编辑
    </el-button>
  </div>
</el-tooltip>

参考文章

  • 饿了么UI按钮禁用时加文字提示,按钮正常时不加文字提示(el-tooltip使用注意事项) - 水冗水孚的文章 - 知乎
    https://zhuanlan.zhihu.com/p/353598379