zoukankan      html  css  js  c++  java
  • element如果Button被Disable了,如何显示Tooltip

    需求

    按钮被disabled了需要显示tooltip

    错误案例

    直接用tooltip包着按钮

    <el-tooltip placement="top" :disabled="tooltipDisabled" content="按钮被disabled了需要显示tooltip">
        <el-button style="margin-bottom:10px" :disabled="btnDisabled" type="primary" size="small" @click="handleEdit">上传脚本</el-button>
    </el-tooltip>
    

    解决

    在tooltip中可以用disabled来控制tooltip是否可用
    用div包着button;并且宽度设置与button大小一致(我这里使用的宽度是80px)

    代码如下:

    <el-tooltip placement="top" :disabled="tooltipDis" content="脚本版本数不能超过5个,请删除弃用的脚本后再上传。">
      <div style="80px">
        <el-button style="margin-bottom:10px" :disabled="upLoadDisabled" type="primary" size="small" @click="handleEdit">上传脚本</el-button>
      </div>
    </el-tooltip>
    

    element如果Button被Disable了,如何显示Tooltip

  • 相关阅读:
    sql ''增删改'' 笔记
    表单
    html基础
    第一本书的总结
    带参
    字符串
    zookeeper入门与实践
    node中间层转发请求
    npm脚本传参问题
    docker入门笔记
  • 原文地址:https://www.cnblogs.com/yihan123/p/14264207.html
Copyright © 2011-2022 走看看