vue文件中style标签的几个标识符
.vue文件中style标签的几个标识符
在人生就要绝望的时候, 被编辑器所提示的一个
scopedSlots
所拯救.
卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法.
问题背景
问题由来
- 项目中使用了elementUI框架, 与
.vue
文件. - 现状:
<template>
中使用$style:[类名]
,<style module>
进行了样式的绑定. - 个人认为使用$style这种方式的绑定, 写起来很麻烦.
- 不仅仅是麻烦更重要的是, 没有办法直接影响和修改element中的样式.
<template>
<span :class="$style.text">
...
</span>
</template>
<style module>
.text {}
</style>
陷入点
- 不知道清楚再style中使用了
module
这个属性的具体含义 - dev启动环境下, 使用
scoped
形成独立作用域后, 并不能影响到elemnt中组件的样式. - 使用
scopedSlots
标识style标签后, 解决问题. 但出现 dev环境正常, 部署后, 不起作用
问题详解
认识.vue
的<style>
标签
这应该是关系到,
vue-loader
这个webpack的插件
vue-laoder
会解析组件, 提取语言块. 在需要的时候, 经过其他的loader处理, 最后组装成一个commonjs模块.- 其实就是
export default出来一个对象
然后呢, 上面的<template>
, 挂载在这个对象的template属性上
- 之前, 直接import引近来一些样式文件也是可行的, 但当时并未思考这些标识如何实现.
- 其实就是
<style>
可以有module和scoped属性, 来将样式封装到组件中. 具有不同封装模式的多个<style>
标签, 可以在一个组件中混合使用- 默认情况下,
style-loader
会提取内容, 并通过<style>
标签, 加入到文档的<head>
中. 也可以通过配置webpack形成单个.css文件.
$style
配合<module>
如何工作
参考: https://vue-loader-v14.vuejs.org/zh-cn/features/css-modules.html
- 在
<style>
中使用一个module
属性, 可以形成名为$style
的计算属性 - 从而在节点中动态绑定样式.
<span :class="$style.text">
...
</span>
- 形成的计算属性可以绑定:class的object/array语法.
- 在html中 class绑定的事一个object语法.
- 如果在data上面的
isRed
这个属性是true
的话, 就会添加上red
这个属性名 - 从而形成了一个属性控制
<span :class="{[$style.red] : isRed}">
测试
</span>
<script>
data() {
return {
entries: [],
isRed: true,
};
},
</script>
<style module>
.red {
color: red;
}
</style>
可以在js中通过
console.log(this.$style.red)
进行访问可以使用
module=''
来更改$style
这个名称
<div :class="aaa.root">
</div>
<style lang="less" module="aaa">
</style>
scoped
的作用域是如何的
- 当
<style></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
- 使用
>>>
语法糖进行样式的注入
<style scoped>
.main_nav .el-menu .el-submenu >>> .el-submenu__title {
background-color: red;
}
</style>
解决方案二: module
方案
- 使用module进行属性的选择
- 然后是用
:global()
进行这个属性下面的全部选择 - 进而选中这个没有在作用域下面但是可以选择到的元素
- 个人始终认为这种选择方案, 可以做到css作用域的区分, 但是, 并不灵活
- 具体的以后再分析
<style lang="less" module="aaa">
.red {
.item {
:global(.el-submenu__title) {
background: red;
}
}
}
</style>
总结
- .vue文件中的
<style></style>
只有module
和scoped
, 没有其他取巧方案 module
形成一个代表属性的计算属性, 默认名称为$style
, 其中的:global()
可以进行这个区域下面的所有元素的选择.scoped
形成的作用域, 可以通过>>>
来进行子组件的样式覆盖, 带只要原生的css支持.
vue文件中style标签的几个标识符的更多相关文章
- sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height,完全去掉!!
在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...
- 防止vue文件中的样式出现‘污染’情况(html5 scoped特性)
近期在项目中出现了vue样式污染的情况: 一个页面刚进去时样式不正常,刷新之后,样式才才达到预期那样 在vue中,如果把样式写在vue文件的 style中,可能会出现样式污染的情况,这是要把写样式的标 ...
- webstorm中es6语法报错,.vue文件中es6语法报错
1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...
- Vue 去脚手架插件,自动加载vue文件,style怎么办
书接上上会,因为当时也没想好怎么办,所以装聋作哑的忽略了Vue文件中的Style,Vue的做法我看着晕乎乎的,细想的话,无非就是自动填写到dom中,所担心的无非是命名冲突. 在一个项目中(像我这种自娱 ...
- visual studio 2019不能在vue文件中直接识别less语法
试了好多方法,不象vs code那样能直接在template vue文件中就识别less语法下边这种分离的方式是可以的,在项目中也比较实用,将来你代码量大了,样式/脚本也还是要和template代码分 ...
- 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容
问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...
- Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验
安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...
- 在.vue文件中让html代码自动补全的方法(支持vscode)
在.vue文件中让html代码自动补全的方法(支持vscode) https://blog.csdn.net/qq_36529459/article/details/79196763 "fi ...
- vue 封装 axios 和 各类的请求,以及引入 .vue 文件中使用
//src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可 /** * ajax请求配置 */ import axios fro ...
随机推荐
- Provided Maven Coordinates must be in the form 'groupId:artifactId:version'.
[hadoop@hadoop1 bin]$ ./spark-shell --packages org.mongodb.spark:mongo-spark-connector_2.10-2.2.1 Ex ...
- Ubuntu 配置 nfsserver
https://help.ubuntu.com/lts/serverguide/network-file-system.html#nfs-installation 网络文件系统 (NFS) NFS 允 ...
- iOS开发UIScrollView常见属性和方法
一.ScrollView常用方法和属性 @property(nonatomic)CGPoint contentOffset; 设置滚动的偏移量 @property(nonatomic)CGSize c ...
- REST的本质,就是用户操作某个网络资源(具有独一无二的识别符URI),获得某种服务,也就是动词+资源(都是HTTP协议的一部分)
REST的名称”表现状态转化”中,省略了主语.”表现”其实指的是资源的表现. 资源就是网络上的一个数据实体,或者说是一个具体信息.它可以是一段文本.一张图片.一首歌曲.一种服务.你可以用一个URI(统 ...
- httpd2.4.27rpm包制作
http2.4.27 rpm包制作1.安装rpm-buildyum -y install rpm-build2.使用普通用户创建spec规则文件su - lxhvim httpd.spec Name: ...
- caioj1465&&poj1024: 【AC自动机】地图匹配
刷的第二题AC自动机,这题简直了.. 用询问的串建AC自动机,然后...爆搜! ACBB ACBBACCA A AABBC ...
- xunit输出output到控制台
1.https://xunit.github.io/docs/capturing-output 里面似乎提到2个方法,第二个方法还需要在配置文件中添加appSetting 这里采用第一种方法, 1.添 ...
- poj 3461 Oulipo(kmp统计子串出现次数)
题意:统计子串出现在主串中的次数 思路:典型kmp #include<iostream> #include<stdio.h> #include<string.h> ...
- 黑客技术 —— Linux 命令行
很多和正则表达式 re 是一致的: 1. 修改上次执行的命令 删除多余部分: % grep fooo /var/log/auth.log % ^o % grep foo /var/log/auth.l ...
- POJ2689:Prime Distance(大数区间素数筛)
The branch of mathematics called number theory is about properties of numbers. One of the areas that ...