.vue文件中style标签的几个标识符
在人生就要绝望的时候,被编辑器所提示的一个scopedSlots所拯救.
卧槽,写到最后才发现这个属性的具体卵用. 详情见最后解决办法.
问题背景
问题由来
- 项目中使用了elementUI框架,与.vue文件.
- 现状: 中使用$style:[类名],
陷入点
- 不知道清楚再style中使用了
module这个属性的具体含义
- dev启动环境下,使用
scoped形成独立作用域后,并不能影响到elemnt中组件的样式.
- 使用
scopedSlots标识style标签后,解决问题. 但出现 dev环境正常,部署后,不起作用
问题详解
认识.vue的
- 可以在js中通过
console.log(this.$style.red)进行访问
- 可以使用
module=''来更改$style这个名称
标签有 scoped属性的时候,他的css样式只作用在当前作用域
使用了scoped之后,父组件的样式不会再深入到自组件.
- 不过子组件的根节点同时受到 父组件有作用域的CSS 和 子组件有作用域的影响
- 但是有一点: 如果我们在子组件上面添加了一个类样式 就能向下一层层的进行修改
深度作用选择器: >>> 或者是 /deep/
- 已验证: 在less下面不起作用
- 已验证: 在普通的css下才起作用.
- 据网上说,
stylus起作用,scss不起作用,并未验证
v-html动态生成的样式不受作用域内样式影响,但我想应该加个类样式名称,可以解决.(未验证)
css的作用域的渲染方式,远不如class的渲染速度
递归组件中,小心使用CSS样式.
element中样式的混入方式 (todo)
- 通过打包进行样式的使用,故使用方式在
build的文件夹中
- 样式目录为:
element/packages/theme-chalk/src/menu.scss,以方便后期的具体查看
解决过程
使用scopedSlots解决
我擦哦,再次测试后,发现添加scopedSlots并没有什么卵用,和什么都不写是他妈一个样子啊.. 我说怎么,怎么查了半天,也没人用.
还被这玩意所拯救,也真是够了..
当时还骄傲了半天,还以为是发现了新天地,也真是6了.
添加scoped之后,在子组件上面添加类样式名,发现并没有卵用
错误依旧: 只是在表面层上的有一些data-v的注入
没有找到需要注入到里面的条件,发现自己前面大部分的判断都是错误的.
解决方案一:scoped方案
- 将无法进行样式覆盖的部分拿出来
- 使用原生的css样式,添加scoped
- 使用
>>> 语法糖进行样式的注入
.main_nav .el-menu .el-submenu >>> .el-submenu__title {
background-color: red;
}
解决方案二: module方案
- 使用module进行属性的选择
- 然后是用:global()进行这个属性下面的全部选择
- 进而选中这个没有在作用域下面但是可以选择到的元素
- 个人始终认为这种选择方案,可以做到css作用域的区分,但是,并不灵活
- 具体的以后再分析
总结
- .vue文件中的
module和scoped,没有其他取巧方案
module形成一个代表属性的计算属性,默认名称为$style,其中的:global()可以进行这个区域下面的所有元素的选择.scoped形成的作用域,可以通过>>>来进行子组件的样式覆盖,带只要原生的css支持.
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
