关于萌新初识VUE的那些事 (关于Element-ui与IView中的样式覆盖)
今天没有题外话,我们直接切入主题。
在合作开发时,在大哥定好全局样式之后,我们个人页面的开发中是不可以影响到全局样式的,是不可以的!(不然会被骂的,就算不被骂,当你辛辛苦苦改出一个样式的时候,一回头,发现你没动,但是样式却变了,你恼火么,我很恼火!)所以在开发自己的页面时,规定样式范围很重要。所以今天我们来讲一下这个虽然很小但是很重要的知识点。
在进行自己页面开发需要独立样式时请这样使用
scoped字段的意义就是相当于你在控制你的<div>容器时为了唯一识别而给他的一个id比如<div id="xxxx">。当你给style加上scoped时,在编译之后样式就会带上自己的id比如
这样子之后,这个样式就只属于这个页面了,不会影响到全局的样式。
当然,在自己编写的容器中我们可以直接定义,但是在我们使用了其他的UI组件之后,我们会发现,在scoped中改变的样式并不能影响到样式了。因为我们是在全局中对其样式进行引入的,所以在自己规定的小区域内的改变并不能影响到他,但是直接写一个<style></style>在这里面进行修改则又会影响到全局的样式。接下来我们讲一下解决方法。
在Element-UI中覆盖样式
Element-UI跟IView覆盖的方式有点不同。在对Element-UI的样式进行覆盖时,我们需要在
中进行全局影响,而不可以在
中进行修改。如果有需要的话,写两个,一个带scoped,一个不带也是可以的。
之后我们在Element-UI的组件上给他加一个父层样式选择器
然后在样式中这样进行覆盖
这样做,在进行样式判断的时候会顺着层次顺序,只修改fatherclass下面的dialog的样式,这样就影响不到全局的样式了。
在IView中覆盖样式
IView中,则需要在外层套接一个容器,直接在组件上增加父层样式选择器是不起作用的。
具体做法如下
我们在组件外面套接了一层自己的容器,之后进行样式改变
这样就成功了!可喜可贺,可喜可贺!
TIP:
1.定义的父层样式选择器可以不进行样式的编写,因为他们只是为了方便我们定义一个固定的影响区域。
2.如何找到我需要修改的样式名称
打开控制台,去页面上寻找
之后在
去寻找你需要修改的样式,调节好之后直接把样式复制到你的代码中就可以了。
阅读更多- 关于萌新初识VUE的那些事 (定制自己的级联选择器)
- 关于萌新初识VUE的那些事 (在使用百分比制作样式式,如何获取其具体的长度(px))
- 关于Vue element ui 使用
- Vue 之Element ui 中upload的那些事
- 关于 Vue.js+Element-UI 日期控件 日期范围选择
- 使用Vue与ElementUI开发时,关于时间控件的问题
- 关于vue + element ui 跟ajax的赋值问题
- 浅谈vue中改elementUI默认样式引发的static与assets的区别
- vue+elementUI 关于日期选择器的disabledDate问题
- vue中通过修改element-ui的类修改相关组件的样式
- vue全家桶+element-UI搭建后台管理系统(2)“:引入基本样式和图标库”
- spring boot + vue + element-ui全栈开发入门——项目部署
- vue关于class和样式的使用
- 详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
- 关于chrome浏览器-webkit-autofil覆盖input样式问题解决方案
- 基于VUE+ElementUI对web socket的配置
- vue基于element-ui的三级CheckBox复选框功能的实现代码
- vue入门 | 使用vue.js2.0 + ElementUI开发后台管理系统详细教程(一)
- vue与element-ui的结合,脚手架第一步【vue日记】
- vue中的swiper element ui