Element UI中Tooltip 给其中的按钮添加了disabled禁用属性,文字提示没有了,具体解决方法如下:

一、想要的效果如下:

二、实现代码如下:

<el-tooltip content="不允许使用" v-else :disabled='false'  placement="top">
    <span><el-button icon="el-icon-plus" disabled type="primary" size="mini" plain @click="newaddbtn">新增</el-button> 
            </span>
</el-tooltip>

三、解决办法

主要也是就是解决如图中的红色框里的内容,将以下三点解决完毕就可实现如上图效果:

  • 1、要给tooltip弹框添加disabled的属性并赋值为false

  • 2、给需要弹窗的元素外嵌套一层<div>或者<span>标签,图中嵌套的为<span>标签

  • 3、给需要弹窗的元素添加disabled属性 

  • 7
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以通过修改 Element UITooltip 组件原始代码,为 el-input 添加通过获得焦点触发文本提示的功能。以下是一种实现方式: 1. 打开 Element UITooltip 组件源码文件,通常是在 `node_modules/element-ui/packages/tooltip/src/main.vue`。 2. 在 `template` 部分找到 `el-tooltip` 组件的使用位置,通常是在 `el-input` 的外部包裹一层 `el-tooltip`。 3. 在 `el-tooltip` 上添加一个新的属性 `@show`,用于监听提示框显示事件。 ```html <el-tooltip class="input-tooltip" :content="tooltipContent" :disabled="!tooltipContent" @show="handleTooltipShow"> <el-input ...></el-input> </el-tooltip> ``` 4. 在 `methods` 部分添加一个新的方法 `handleTooltipShow`,用于处理提示框显示事件。 ```javascript methods: { handleTooltipShow() { if (this.$refs.input) { this.$refs.input.focus(); } } } ``` 在该方法,我们通过 `$refs.input` 获取到 `el-input` 的引用,然后调用 `focus()` 方法使其获得焦点。 5. 在 `data` 部分添加一个新的属性 `tooltipContent`,用于存储提示框的文本内容。 ```javascript data() { return { tooltipContent: '请输入内容' // 设置默认的提示文本 }; } ``` 6. 在需要触发提示功能的时候,通过修改 `tooltipContent` 的值来更新提示文本。 ```javascript this.tooltipContent = '请输入内容'; ``` 注意:这里只是一个简单的示例,你可以根据实际需求进行修改和扩展。另外,修改 Element UI 的源码可能会影响到后续的升级和维护,建议在修改之前做好备份并了解相关风险。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值