发表于： 2019-10-02 21:50:33
0 842
今天完成的事情：
1 完成了项目的创建
2 引入element-ui，熟悉一下他的用法，引用了input，下拉框，日期
明天计划的事情：
1 申请svn地址，弄主干，分支等
2 把消息管理页面样式写完
遇到的问题：
1 组件穿透无法生效
一开始使用的>>>的方法穿透的，试了好几遍发现样式都改不了，没有作用。去查询了下说>>>适用于stylus的，在scss和less是用的是/keep/的方式，之后试着这个，当时报错了，搞了一下午都没什么搞头，说的都是这个方式，后面偶然看到有官方文档的链接，进去看了之后发现美滋滋，顺利解决我的问题，如下：
像其他的文章，说的都是用/keep/，找了好久都是这么说的，是在是坑的很。
收获：
scoped
当style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。
即：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom——组件内部dom。
scoped穿透
scoped看起来很美，但是，在很多项目中，会出现这么一种情况，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。
1. 通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值，
注意还有我们上面说的keep的两种
2. 曲线救国的方法：在定义一个含有scoped属性的style标签之外，再定义一个不含有scoped属性的style标签，即在一个vue组件中定义一个全局的style标签，一个含有作用域的style标签，此时，你只需要将修改第三方样式的css写在第一个style中即可。
返回列表
评论