脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → element el-tooltip修改样式

element el-tooltip实现自定义修改样式

 更新时间：2023年07月07日 09:58:33   作者：Dark_programmer  
本文主要介绍了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修改样式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vant 中的Toast设置全局的延迟时间操作

    Vant 中的Toast设置全局的延迟时间操作

    这篇文章主要介绍了Vant 中的Toast设置全局的延迟时间操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue自嵌套树组件使用方法详解

    Vue自嵌套树组件使用方法详解

    这篇文章主要为大家详细介绍了Vue自嵌套树组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue.js-div滚动条隐藏但有滚动效果的实现方法

    vue.js-div滚动条隐藏但有滚动效果的实现方法

    下面小编就为大家分享一篇vue.js-div滚动条隐藏但有滚动效果的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 简单方法实现Vue 无限滚动组件示例

    简单方法实现Vue 无限滚动组件示例

    这篇文章主要为大家介绍了简单方法实现Vue 无限滚动组件示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-10-10
  • vue3 process.env.XXX环境变量不生效的解决方法

    vue3 process.env.XXX环境变量不生效的解决方法

    这篇文章主要给大家介绍了关于vue3 process.env.XXX环境变量不生效的解决方法,通过文中介绍的方法可以很方便的解决遇到的问题,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-08-08
  • Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-12-12
  • Vue中使用stylus报错的解决

    Vue中使用stylus报错的解决

    如果你也和我一样，按照正常的流程下载并且配置了stylus，但是依旧报错，也许这篇文章就是你的菜，一起来看看吧
    2022-08-08
  • Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解

    Vue中判断语句与循环语句基础用法及v-if和v-for的注意事项详解

    在Vue指令中,最经常被用于做逻辑操作的指令,下面这篇文章主要给大家介绍了关于Vue中判断语句与循环语句基础用法及v-if和v-for注意事项的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue基于Element按钮权限实现方案

    vue基于Element按钮权限实现方案

    这篇文章主要介绍了vue基于Element按钮权限实现方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • Vue中sync修饰符分析原理及用法示例

    Vue中sync修饰符分析原理及用法示例

    在vue中，子组件如果想修改父组件的变量，一般做法是通过绑定事件的方法，父组件向子组件传递修改变量的方法，子组件触发修改变量的方法执行，这种方式中规中矩；另一种方法是使用sync修饰符，此方法可以减少很多代码量
    2022-08-08

最新评论