先粘一张官方给出的UI样式
文章图片
关于UI框架,用起来虽然很方便,但是样式却和所需的不一样,那么该如何修改成自己想要的样式呢?
在粘一张我自己修改后的样式图
文章图片
不仅修改了button的背景色、文字颜色,更修改了上方提示气泡的背景色
官方api里没有看到如何修改button样式
,所以我修改的方式就是在使用组件的地方,写行内样式
tip 1
但是修改上方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;
}
【elementUI|element-ui 之 el-tooltip 如何自定义修改样式(???)】需要注意的就是,该代码片段,需要写在
根文件的style
里,如果写在当前文件里也并非不可,但是需要将scope
取消掉,原因在上方已阐述过一次。该组件的层级不在于你使用的地方,它与跟文件属于统一层级
推荐阅读
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 前端|web前端dya07--ES6高级语法的转化&render&vue与webpack&export
- 前端开发|Vue2.x API 学习
- vue|Vue面试常用详细总结
- vue|电商后台管理系统(vue+python|node.js)
- 腾讯TEG实习|腾讯实习——Vue解决跨域请求
- Vue|vue-router 详解
- vue|vue3替代vuex的框架piniajs实例教程
- Vue|Vue3.0的插槽是如何实现的()
- 前端|面试官(谈谈Vue和React的区别())