el-tooltip 按钮禁用后提示信息无法展示

最新推荐文章于 2024-08-01 15:40:32 发布

MicaQian

最新推荐文章于 2024-08-01 15:40:32 发布

阅读量427

点赞数 1

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/qxy15997826736/article/details/125447880

版权

该博客介绍了如何在Vue项目中，将el-tooltip组件用于包裹el-button，以实现提示信息功能。在原始代码基础上，通过添加一个span元素并设置样式，使按钮在外形上有所调整，同时保持了原有的功能特性，如提示内容、显示效果和禁用状态的控制。

摘要由CSDN通过智能技术生成

原代码：

<el-tooltip class="item" effect="light" :content="dataModel.tipContent" placement="top-start" :disabled="dataModel.tipDisabled == true">
        <el-button v-show="dataModel.step === 1 || dataModel.step === 2" type="default" 	  @click="getInfo" :disabled="dataModel.cjbtnDisabled" plain>采集</el-button>
</el-tooltip>

修改后：需要在按钮外面套一个span

<el-tooltip class="item" effect="light" :content="dataModel.tipContent" placement="top-start" :disabled="dataModel.tipDisabled == true">
    <span style="margin-right:10px">
        <el-button v-show="dataModel.step === 1 || dataModel.step === 2" type="default" @click="getInfo" :disabled="dataModel.cjbtnDisabled" plain>采集</el-button>
    </span>
</el-tooltip>