关于vue使用element-ui/weui中修改官方的样式

关于vue使用element-ui/weui中修改官方的样式
​​在这个文章前我们要明白常用的框架以下：

Element-UI：Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是 Mint UI 。

饿了么还是有点东西的饿了么还是有点东西的

WeUI：一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一

​在vue项目中我们经常使用element-ui/weui来提升项目开发速度，运用框架中的更人性化的样式，

简单易用，样式美观，免费开源，内容丰富，贴近生活也是这些框架的优势之一。​

那么我们的问题来了：​

如果我想使用它的框架，但是并不想运用他的样式，这时候该怎么办。​

​

其实这个问题也很简单，在页面找到你需要的标签，获取上面的class，在自己的css文件中修改这

个样式改成你想要的样子。

这个方法注意：存在一些样式你的权限不够，这时在样式后加入 !important​ 就好了。

这个还是基本的，难一点的来了：​

今使用了element-ui的​标签

​该标签效果如下：

可以为该元素产生一个右上标可以为该元素产生一个右上标

​这个样式运用到我的页面上不好的地方相信大家已经看到了，红色上标的一部分超出浏览器的可视区域，这样当然是不行的，用户体验极差呀。于是我开始了修改样式之旅。

这个是标签部分的代码这个是标签部分的代码

​可以看到，它自动为我生成了一个标签，当时我没在意，后来才发现这个关键点。

页面上呈现的css样式页面上呈现的css样式

​可以看到这个标签是用定位定上去的，那就好办了，于是我在style中加入了

为了防止全选不够特意加了 !important为了防止全选不够特意加了 !important

​可是页面效果如下：

并没有实现我想要的效果并没有实现我想要的效果

​这个地方我百思不得其解，于是我测试了他的父元素的样式修改：

​

添加了父元素的样式添加了父元素的样式

效果：

成功的修改了父元素的样式成功的修改了父元素的样式

​这里我就很奇怪了，为什么我可以修改父元素的样式却不能修改子元素的。

​在经过一番查找资料，请教了我的导师小红以后发现了问题的所在。

其实这个问题就在于：

这个定位的标签并不是我的文档里的，而是自动生成的。

虽然他是在我的页面上显示了，但我并没有写过这个标签，也就是说我的样式都加不到他身上，

明白了这一点就好办了。

解决这个问题并不复杂以下几种都可以解决：​

1：改变局部style为全局style​

删除了scoped删除了scoped

将定义局部css的scoped删除​

效果：​


效果显著效果显著

这样会造成全局的css污染，所以我个人不建议使用

​2：样式穿透：

理解scoped：在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。​

​如果您希望 scoped 样式中的选择器“深入”，即影响子组件，则可以使用 >>> 组合器：

​

官方文档中的方法官方文档中的方法

某些预处理器（如Sass）可能无法 >>> 正确解析。在这些情况下，您可以使用 /deep/ 组合器 - 它是别名，>>> 并且完全相同。

将我的样式改为​：

​效果：

效果显著效果显著

​可以看见，效果已经出来了在样式进行修改：

​

想要的效果就出来了想要的效果就出来了

效果实现。

Ps：

其实小红还教我一种方法总结如下​：

对这个父元素添加上下margin​

改变父元素的行高。​

效果也能出来，但是有一点问题，就是红圈不能覆盖文字。​

​

​虽然只是个小问题，但是成就感还是有的。：）

如果有什么写错的的地方欢迎指正。​

如果有什么不足的地方欢迎在评论区留言。​
（水印是我自己的微博）

谢谢。​

​

​参考文献：

vuejs官网：https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors​

php中文网：http://www.php.cn/js-tutorial-399072.html

​​​​​