.vue文件中style标签的几个标识符
在人生就要绝望的时候,被编辑器所提示的一个scopedSlots
所拯救.
卧槽,写到最后才发现这个属性的具体卵用. 详情见最后解决办法.
问题背景
问题由来
- 项目中使用了elementUI框架,与.vue文件.
- 现状: 中使用$style:[类名],
在人生就要绝望的时候,被编辑器所提示的一个scopedSlots
所拯救.
卧槽,写到最后才发现这个属性的具体卵用. 详情见最后解决办法.
module
这个属性的具体含义scoped
形成独立作用域后,并不能影响到elemnt中组件的样式.scopedSlots
标识style标签后,解决问题. 但出现 dev环境正常,部署后,不起作用认识.vue
的标签
这应该是关系到,vue-loader
这个webpack的插件
vue-laoder
会解析组件,提取语言块. 在需要的时候,经过其他的loader处理,最后组装成一个commonjs模块.
可以有module和scoped属性,来将样式封装到组件中. 具有不同封装模式的多个
标签,可以在一个组件中混合使用style-loader
会提取内容,并通过
标签,加入到文档的
中. 也可以通过配置webpack形成单个.css文件.$style
配合
如何工作
参考: https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html
在中使用一个
module
属性,可以形成名为$style
的计算属性从而在节点中动态绑定样式.
形成的计算属性可以绑定:class的object/array语法.
console.log(this.$style.red)
进行访问module=''
来更改$style
这个名称scoped
属性的时候,他的css样式只作用在当前作用域
使用了scoped
之后,父组件的样式不会再深入到自组件.
深度作用选择器: >>>
或者是 /deep/
stylus
起作用,scss
不起作用,并未验证v-html
动态生成的样式不受作用域内样式影响,但我想应该加个类样式名称,可以解决.(未验证)
css的作用域的渲染方式,远不如class的渲染速度
递归组件中,小心使用CSS样式.
build
的文件夹中element/packages/theme-chalk/src/menu.scss
,以方便后期的具体查看使用scopedSlots
解决
我擦哦,再次测试后,发现添加scopedSlots
并没有什么卵用,和什么都不写是他妈一个样子啊.. 我说怎么,怎么查了半天,也没人用.
还被这玩意所拯救,也真是够了..
当时还骄傲了半天,还以为是发现了新天地,也真是6了.
添加scoped
之后,在子组件上面添加类样式名,发现并没有卵用
错误依旧: 只是在表面层上的有一些data-v的注入
没有找到需要注入到里面的条件,发现自己前面大部分的判断都是错误的.
解决方案一:scoped
方案
>>>
语法糖进行样式的注入.main_nav .el-menu .el-submenu >>> .el-submenu__title {
background-color: red;
}
解决方案二: module
方案