vue对插件(iview,elementui,treeselect)样式的局部修改方式
(iview,elementui,treeselect)样式的局部修改
学习描述
具体方法
vue+iview 样式穿透-修改第三方插件样式
修改第三方插件样式
(iview,elementui,treeselect)样式的局部修改 学习描述在vue的使用过程中，我们知道插件的使用可以大大的提高我们的开发效率，这写插件都是经过很多人的验证和修改的，要比我们自己写方便的很多。
但是在开发的过程中，有些插件一些在特定的页面我们可能不要原来的样式，需要进行修改。然而我们在使用vue的过程中都会使用scope防止当前页面的样式污染到其它的页面，可是这样也就导致了我们修改了插件的样式无法起到作用。只有全局修改才能起到作用。
那么有没有别的方式，既能修改插件的样式而且有不会污染到全局的样式呢？ 答案是：有的
具体方法1> /deep/ 深层穿透
scoped能有效的方式样式的全局污染，但是同时也是阻止了我们对第三方插件样式的修改，使用/deep/样式穿透既可以达到修改第三方插件样式的效果，而且不会对全局造成污染。
/deep/ .ivu-tooltip-light .ivu-tooltip-inner {
background-color: #ecc9e2;
color: #f30000;
}
2> >>>
其实这个就是/deep/的另外一种写法，只不过，可能有些sass,less之类的预处理无法正确的解析，所以最好是使用/deep/.
>>> .ivu-tooltip-light .ivu-tooltip-inner {
background-color: #ecc9e2;
color: #f30000;
}
注意：穿透方法实际上违反了scoped属性的意义。而且在vue中过多使用scoped导致页面打包文件体积增大。
vue+iview 样式穿透-修改第三方插件样式 修改第三方插件样式方法一：
在以前没有用深度选择器的时候，当想修改第三方插件样式时，通常做法都是在公共样式表文件中，加一个.zujian-parent-class .disanfang-class来修改。
例如我想修改iview单元格样式：
common.styl文件中这样写
.first-table .ivu-table-cell
padding-left: 10px;
方法二：
和方法一差不多的还可以在组件内写一个无scoped的
<style lang="stylus">
/*此处写覆盖样式*/
.first-table .ivu-table-cell
padding-left: 10px;
</style>
<style lang="stylus" scoped>
/*此处写局部样式*/
</style>
方法三：
用深度选择器形成样式穿透是一个更好的选择，这样不用担心同名类造成样式污染
page.vue组件中
<style lang="stylus" scoped>
/*样式穿透 可以使用/deep/ >>> ::v-deep
具体使用哪个根据不同的语言、版本以及webpack版本（webpack2.X的一般不能用 >>>）有所不同 */
.first-table /deep/ .ivu-table-cell {
height: 37px;
line-height:37px;
}
</style>
官网链接
注意：/deep/ >>> ::v-deep 注意事项：
组件内部类无法穿透成功。
例如下单菜单组件，最外层的.ivu-dropdown可以，但是其下一层.ivu-dropdown-rel是无法穿透的。
经验证，以ivewui为例，组件最外层的类都是可以的，但是组件内部的类通过第三种方法有些是无法生效的。其实这也是根据具体组件的加载先后决定的。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
