vue覆盖html,VUE 如何覆盖element组件样式

71 阅读 0 评论 47 点赞

我是靠谱客的博主无聊枫叶，最近开发中收集的这篇文章主要介绍vue覆盖html,VUE 如何覆盖element组件样式，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近在用element UI开发一个toB系统时，发现设计稿和UI库有不小的出入，由于不是内部系统，所以这块的还原度没办法“得过且过”。我整理了一些覆盖UI库样式的“手段”

为什么UI库(这里用的是element UI)的组件不好直接覆盖？

我们通常的vue工程都是用vue-cli自动生成出来的，不知道大家有没有发现一个细节——生成的*.vue文件上会默认带上“scoped”，如下图：

UI库不好覆盖的问题也基本从这里开始了。首先看“scoped”是什么？首先“scoped”并不是vue的专利，(“scoped”属性是HTML5的新特性，如果使用该属性，则样式仅仅应用到style元素的父元素及其子元素。)说人话就是vue用了scoped属性，导致当前*.vue文件里的style仅仅作用于当前组件的元素，而对部分element UI的组件无效(一些简单的组件，例如el-button这种简单替换的还是可以覆盖的)。

“scoped”在工程中是如何工作的？

我们可以用自己的工程运行起来看一下。看看生成的页面是什么样的。