el-button禁用后无法触发el-tooltip

Oikawa
842 阅读2分钟

1.情景再现

页面上有一个确认按钮，当按钮禁用时，鼠标hover按钮时tooltip会根据字段显示不能确认的原因。但在测试时发现某个同事的谷歌浏览器上hover按钮时，只有按钮的禁用标志，tooltip的提示内容却没有显示出来。代码如下：

<el-tooltip
      :content="status ? '已失效' : ''"
      :disabled="!status "
    >
      <el-button
        :disabled="status "
        @click="handleClick"
      >
        确认
      </el-button>
    </el-tooltip>

2.问题定位及原因分析

审查定位该元素 image.png 这里的工作原理其实就是给需要展示文字提示的按钮加上一个类名el-tooltip,当鼠标移入的时候，有这个类名的就悬浮出文字提示。并且在dom树中生成一个div用来表示tooltip的提示。 image.png

这里有几个不保真的猜想：

  1. 如果直接使用这个el-tooltip的话，这个类名就会加到按钮上，又因按钮已经被禁用了，就会禁掉文字提示的悬浮出现导致效果不会出现。
  2. 版本影响：chrome v117以上显示正常，v114就不显示了。（直接升级版本就不用改代码，但万一客户投诉，总不好拿这个理由搪塞人家）

3.解决办法

  1. 在el-button的外层，再加上一个div包裹起来，这样类名el-tooltip就会加到div身上，就不会受到按钮禁用的影响了。
<el-tooltip
     :content="status ? '已失效' : ''"
     :disabled="!status "
   >
   <div>
     <el-button
       :disabled="status "
       @click="handleClick"
     >
       确认
     </el-button>
   </div>
   </el-tooltip>

2.不使用el-button组件，改用span代替。（需要自定义一些hover和滑出的基础样式）

    <el-tooltip
                :content="status ? '已失效' : ''"
                placement="left"
                :disabled="!status"
              >
                <span @click="handleClick()">确认</span>
              </el-tooltip>

4.参考来源

  1. el-button禁用后，按钮上el-tooltip的内容无法触发的问题 blog.csdn.net/weixin_3960…
  2. 饿了么UI按钮禁用时加文字提示，按钮正常时不加文字提示（el-tooltip使用注意事项） zhuanlan.zhihu.com/p/353598379
avatar
文章
阅读
粉丝