.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标签的几个标识符的更多相关文章

  1. sublime text 3插件改造之AutoFileName去掉.vue文件中img标签后面的width和height，完全去掉！！

    在.vue文件中img标签使用autofilename提示引入文件时,会在文件后面插入宽度高度,如下图: 文件后面会自动插入height和width,其实这两玩意儿在大多数时候并没卵用,然后就开始了百 ...

  2. 防止vue文件中的样式出现‘污染’情况(html5 scoped特性)

    近期在项目中出现了vue样式污染的情况: 一个页面刚进去时样式不正常,刷新之后,样式才才达到预期那样 在vue中,如果把样式写在vue文件的 style中,可能会出现样式污染的情况,这是要把写样式的标 ...

  3. webstorm中es6语法报错，.vue文件中es6语法报错

    1.webstorm中es6语法报错,解决方法: 打开 Settings => Languages & Frameworks => Javascript把 Javascript L ...

  4. Vue 去脚手架插件，自动加载vue文件，style怎么办

    书接上上会,因为当时也没想好怎么办,所以装聋作哑的忽略了Vue文件中的Style,Vue的做法我看着晕乎乎的,细想的话,无非就是自动填写到dom中,所担心的无非是命名冲突. 在一个项目中(像我这种自娱 ...

  5. visual studio 2019不能在vue文件中直接识别less语法

    试了好多方法,不象vs code那样能直接在template vue文件中就识别less语法下边这种分离的方式是可以的,在项目中也比较实用,将来你代码量大了,样式/脚本也还是要和template代码分 ...

  6. 在使用 vscode 时 eslint 检测 .vue 文件中的less 部分内容

    问题: 在使用 vscode 以及 eslint 来检测 基于 webpack 的 vue-cli 的项目中,eslint 无法检测到 .vue 文件中的less 部分内容. 解答: 1.通过 下载 ...

  7. Atom 编辑器安装 linter-eslint 插件，并配置使其支持 vue 文件中的 js 格式校验

    安装方式有如下几种. 1.最常用的安装方式. # 进入atom插件文件夹 cd ~/.atom/packages/ # git clone 插件源文件 git clone https://github ...

  8. 在.vue文件中让html代码自动补全的方法(支持vscode)

    在.vue文件中让html代码自动补全的方法(支持vscode) https://blog.csdn.net/qq_36529459/article/details/79196763 "fi ...

  9. vue 封装 axios 和 各类的请求，以及引入 .vue 文件中使用

    //src 底下建立 api 文件夹 // api 文件夹下建立 request,js 文件,文件内容复制下面这段代码即可   /**  * ajax请求配置  */ import axios fro ...

随机推荐

  1. XHTML中button加入超链接以及使插入图片与屏幕一样大

    1.button加入超链接 (1)假设是在本页跳转到新页面.用 <span style="font-size:18px;"><input type="b ...

  2. 从小姐姐博客那里看到的流光文字（CSS3 animate）

    对于流光文字,大家并不陌生,毕竟我们都经历过非主流的时代.你们卟懂绯紸流!色彩缤纷的QQ空间...... 还记得那些炫酷的签名档,或者那些炫酷的动态头像.不过大家对于流光文字的印象还是图片.那么在网页 ...

  3. 根据查询出各地订单商品数量 group by

    order订单表,orderprduct订单商品表,area地区表 SELECT (a1.Name+a2.Name+a3.Name) AS areanaem,orderArea.AreaId,orde ...

  4. glibc CVE-2015-7547漏洞的分析和修复方法【转】

    本文转载自:http://blog.csdn.net/tengxy_cloud/article/details/50764370 漏洞概述 glibc中处理DNS查询的代码中存在栈溢出漏洞,远端攻击者 ...

  5. POJ1860 Currency Exchange —— spfa求正环

    题目链接:http://poj.org/problem?id=1860 Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Tota ...

  6. 使用Windows Debugger调试托管代码----引用自官方帮助文档

    以下文字引用在Windbg的帮助文档.觉得对初次调试托管代码,非常有用,故粘贴至此. ========================================================= ...

  7. Microsoft.XMLHTTP基本用法

    客户端调用XMLHTTP的过程很简单,只有5个步骤:1.创建XMLHTTP对象2.打开与服务端的连接,同时定义指令发送方式,服务网页(URL)和请求权限等.客户端通过Open命令打开与服务端的服务网页 ...

  8. 基于阿里云上实现全站https的正确姿势(一)

    对应的网址:https://yq.aliyun.com/articles/65199 摘要: 目前主流大厂的网站和服务都已经实现了全站https, 例如: baidu, taobao, jd等. 关于 ...

  9. sizeof（）解析（原）

    (一)基本概念     sizeof操作符以字节形式给出了其操作数的存储大小.操作数可以是一个表达式或括在括号内的类型名.操作数的存储大小由操作数的类型决定. (二)使用方法 1.用于数据类型     ...

  10. DLL远程注入实例

    一般情况下,每个进程都有自己的私有空间,理论上,别的进程是不允许对这个私人空间进行操作的,但是,我们可以利用一些方法进入这个空间并进行操作,将自己的代码写入正在运行的进程中,于是就有了远程注入了. 对 ...