element el-tooltip实现自定义修改样式
先粘一张官方给出的UI样式
关于UI框架，用起来虽然很方便，但是样式却和所需的不一样，那么该如何修改成自己想要的样式呢？
在粘一张我自己修改后的样式图
不仅修改了button的背景色、文字颜色，更修改了上方提示气泡的背景色
官方api里没有看到如何修改button样式,所以我修改的方式就是在使用组件的地方，写行内样式
<el-tooltip
style="color:white;border:none;background-color:#7ec9a1"
content="这里是内容一"
placement="top"
:enterable='false'>
<el-button>tip 1</el-button>
</el-tooltip>但是修改上方tip提示的样式，就遇到了一些小问题
- 第一就是没找到该dom
- 找到dom，就不知该如何修改
刚开始，在使用el-tooltip的地方，本以为直接查看元素就能找到dom节点，但是有些想当然了。在查阅一番资料文献之后，才发现，其实这个组件的层级，并不是在你使用他的地方，而是和你的app同一层级，所以在当前使用的地方找不到tip提示的dom节点
既然找到了，那就应该能够修改了吧？非也
根据官方定义使用的className名 el-tooltip__popper可以修改掉上方tip提示泡的背景色，但是下方的箭头却没修改成功，修改他的className也并没有效果
.el-tooltip__popper{
background: rgba(0,0,0,0.65) !important;
}如果箭头的样式与tip提示的样式不一样，还不如不进行修改，不然会显得很突兀。再次查阅资料之后，发现可以修改箭头样式的方法，实际操作之后发现有效，代码如下：
.el-tooltip__popper[x-placement^=top] .popper__arrow:after{
border-top-color: #595959 !important;
}需要注意的就是，该代码片段，需要写在根文件的style里，如果写在当前文件里也并非不可，但是需要将scope取消掉，原因在上方已阐述过一次。
该组件的层级不在于你使用的地方，它与跟文件属于统一层级
到此这篇关于element el-tooltip实现自定义修改样式的文章就介绍到这了,更多相关element el-tooltip修改样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue使用正则校验文本框为正整数问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
Vue数组中出现__ob__:Observer无法取值问题的解决方法
__ob__: Observer这个属性其实是Vue监控变量产生的,下面这篇文章主要给大家介绍了关于Vue数组中出现__ob__: Observer无法取值问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
由于公司网络登element-ui官方文档很慢,想把他载下来离线文档本地跑,下面这篇文章主要给大家介绍了关于本地部署element-plus文档的简单步骤,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，该组件将不会销毁，这篇文章主要介绍了关于Vue中keep-alive的作用是什么?怎么使用,需要的朋友可以参考下2023-04-04
Vue 3.0 前瞻Vue Function API新特性体验
这篇文章主要介绍了Vue 3.0 前瞻Vue Function API新特性体验，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
这篇文章主要为大家介绍了ant-design-vue按钮样式扩展方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了TypeScript中集成Tween.js踩坑记录，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了解决vue 局部过滤器获取不到this的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-01-01
这篇文章主要介绍了vue3 component is 不显示的问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
Nuxt.js 是一个基于 Vue.js 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织， Nuxt.js 主要关注的是应用的 UI渲染,需要的朋友可以参考下2019-05-05
最新评论