el-Tooltip以及el-popover提示,content换行,slot的使用

一、el-tooltip内容换行:(使用slot#content)

效果图:
在这里插入图片描述

<el-tooltip class="item" effect="dark" placement="top">
                            <div slot="content">
                                 <span>1.所选的表必须设有主键,并且是单字段主键</span><br/>
                                 <span>2.必须保证主键长度至少19位</span>
                            </div>
                            <el-radio :label="0" border>idWorker</el-radio>
                        </el-tooltip>

中间也可以放其他el标签,el-input,el-button等等,我这里的需求是el-radio提示。

二、使用el-Popover 弹出框

有局限性,经测试没有第一种好用。无法使用在el-radio中,具体原因还在研究,一般来说提示还是用第一种比较好。
效果图:
在这里插入图片描述<el-popover placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-button slot="reference">hover 激活</el-button> </el-popover>

还有很多种样式,参考:https://element.eleme.cn/#/zh-CN/component/popover#events

### 设置 Element UI 中 `el-tooltip` 组件的宽度 为了调整 `el-tooltip` 的宽度,可以通过自定义 CSS 类来实现这一目标。Element UI 提供了多种方法来自定义组件样式。 #### 方法一:通过内联样式设置宽度 可以直接在模板中使用 `:content-style` 属性为工具提示框指定特定的样式对象,其中包括宽度属性: ```html <template> <div> <el-tooltip content="这是一个很长的文字说明" placement="top"> <!-- 添加 :content-style 来设定宽度 --> <span slot="content" style="width: 200px;"> 这是一个很长的文字说明 </span> 鼠标悬停查看tooltip </el-tooltip> </div> </template> ``` 这种方法适用于简单的场景,在某些情况下可能不够灵活[^1]。 #### 方法二:全局覆盖默认样式 对于更复杂的项目结构或希望统一管理样式的情况,推荐创建一个新的 SCSS 文件并引入到项目的入口文件中。这样可以确保所有的 `el-tooltip` 实例都能应用相同的样式规则: ```scss /* 自定义样式 */ .el-popover { max-width: none !important; /* 取消最大宽度限制 */ } .my-custom-tooltip-class .popper__arrow, .my-custom-tooltip-class[x-placement^=bottom]::after, .my-custom-tooltip-class[x-placement^=left]::before, .my-custom-tooltip-class[x-placement^=right]::before{ display:none!important; } .my-custom-tooltip-class { width: 300px !important; /* 设定固定宽度 */ } ``` 接着可以在 Vue 组件里给 `<el-tooltip>` 加上对应的 class 名字: ```html <template> <div> <el-tooltip effect="dark" content="这是带有自定义样式的 Tooltip" placement="top" popperClass="my-custom-tooltip-class">鼠标悬停查看tooltip</el-tooltip> </div> </template> ``` 这种方式不仅能够控制宽度,还可以进一步定制箭头位置等细节[^2]。 #### 方法三:基于 JavaScript 动态计算宽度 当遇到复杂的需求比如根据内容自动适应宽度时,可以考虑利用 JavaScript 或者 Vue.js 生命周期钩子函数来进行动态处理。不过这通常涉及到更多的逻辑编写,并不是最常用的方法[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值