.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. [vue] 在.vue文件中style是必须的吗？那script是必须的吗？为什么？

    [vue] 在.vue文件中style是必须的吗?那script是必须的吗?为什么? style 不是必须的,script 是必须的,而且必须要写上 个人简介 我是歌谣,欢迎和大家一起交流前后端知识. ...

  2. 在js中获取vue文件的style标签下的内容

    前言: 由于业务需求,将页面内容转成pdf,前端需要提供整个页面的dom元素提供给后端,但样式并不是在行内而是在<style>标签里. 解决方案: 通过原生属性 document.styl ...

  3. vscode在.vue文件中template标签没有html标签提示。

    最近在学习vue时,看到网课老师在书写template时,html代码具有自动闭合标签的功能,然后自己在网上找了许多教程,发现这样的文章很少,自己就琢磨了下,才写了这篇博客供大家参考 1. 使用快捷方 ...

  4. 关于vue文件中template标签尖括号下的红波浪线问题

    首先,vscode今天突然出现这个问题,所有的template标签都被标红 ​​​​​​​        ​​​​​​​         查找百度说修改.eslintrc.js的数据 在其中的pars ...

  5. vue项目目录结构分析、过滤器、vue文件中基础template、script、style

    项目目录结构: 1.在一个项目中一般的目录结构为:my_project------------项目文件夹|____src--------------------------------存放人可以看懂的 ...

  6. vue如何在style标签中使用data响应式数据？

    文章目录 一.面临到的需求? 二.如何在css中使用变量? 三.vue如何在style标签中使用data响应式数据? 一.面临到的需求? 首先我们知道css对应是有伪类的,如:hover, :acti ...

  7. maven项目的pom文件中各标签理解

    本文来说下maven项目的pom文件中各标签理解 文章目录 常用标签 常用标签 POM是项目对象模型(Project Object Model)的简称 pom.xml主要描述了项目的maven坐标,该 ...

  8. css中style怎么用,css中style标签的使用方法

    css中style标签的使用方法 发布时间:2020-07-01 09:49:22 来源:亿速云 阅读:141 作者:Leah 这篇文章将为大家详细讲解有关css中style标签的使用方法,文章内容质 ...

  9. DCMTK：命令行应用程序修改DICOM文件中的标签

    DCMTK:命令行应用程序修改DICOM文件中的标签 命令行应用程序修改DICOM文件中的标签 命令行应用程序修改DICOM文件中的标签 #include "dcmtk/config/osc ...

最新文章

  1. 【深度学习】基于Colab Pro的TPU训练模型教程(Tensorflow)
  2. Android的Activity生命周期模拟程序及解析
  3. hdu 2686（多线程dp）
  4. JavaEE PO VO BO DTO POJO DAO 整理总结(转)
  5. 新网卡不能绑定“旧”IP故障的解决
  6. HiJson(Json格式化工具)64位 V2.1.2绿色版
  7. VsCode中文输出为乱码的原因及解决方法
  8. vrep中接近开关与激光雷达
  9. Oracle数据库备份与还原语句
  10. 高效能人士的七个习惯读后感与总结概括-（第七章，第八章，第九章）
  11. Unity学习Day14--协程和WWW
  12. 邮件安全防护之反垃圾邮件开源软件ASSP
  13. Kafka 启动报错 AccessDeniedException
  14. #今日论文推荐# 中国矿大团队，开发集成多尺度深度学习模型，用于 RNA 甲基化位点预测
  15. 《朱子治家格言》 清•朱柏庐
  16. 易语言对接腾讯ai智能闲聊
  17. 微信“分享到朋友圈”接口— wx.onMenuShareTimeline() 和 onMenuShareAppMessage — 分享给朋友接口
  18. 统计学习导论（ISLR）（三）：线性回归（超详细介绍）
  19. 肥牛是不是牛肉，为什么？
  20. 在ubuntu 18上进行NPB和mpiP的整合

热门文章

  1. Hadoop2.7.0伪分布式安装教程
  2. 怎么提高大表和小表的连接查询效率？
  3. vCenter and Memory metrics
  4. 一个自定义python分布式爬虫框架。
  5. 车企纷抢无人驾驶赛道，中国智能汽车确定将立法
  6. 使用iText库创建PDF文件
  7. 搭建hue遇到的错误 Couldn't find log associated with operation handle: OperationHandle
  8. OC高级编程——深入block，如何捕获变量，如何存储在堆上
  9. 深入理解Java 8 Lambda（语言篇——lambda，方法引用，目标类型和默认方法）
  10. Tomcat5.0与SqlServer2000配置连接池（jtds驱动）