需求
按鈕被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="width:80px">
<el-button style="margin-bottom:10px" :disabled="upLoadDisabled" type="primary" size="small" @click="handleEdit">上傳腳本</el-button>
</div>
</el-tooltip>