详解.vue文件中style标签的几个标识符


Posted in Javascript onJuly 17, 2018

.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的注入

详解.vue文件中style标签的几个标识符

没有找到需要注入到里面的条件, 发现自己前面大部分的判断都是错误的.

解决方案一: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标签的几个标识符

总结

  • .vue文件中的<style></style>只有modulescoped, 没有其他取巧方案
  • module形成一个代表属性的计算属性, 默认名称为$style, 其中的:global()可以进行这个区域下面的所有元素的选择.
  • scoped形成的作用域, 可以通过>>>来进行子组件的样式覆盖, 带只要原生的css支持.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 两个窗体之间传值实现代码
Sep 25 Javascript
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式(六)
Apr 07 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
吃通javascript正则表达式
Apr 21 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 #Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 #Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 #Javascript
详解如何从零开始搭建Express+Vue开发环境
Jul 17 #Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 #Javascript
微信小程序倒计时功能实例代码
Jul 17 #Javascript
详解vue+webpack+express中间件接口使用
Jul 17 #Javascript
You might like
php中如何防止表单的重复提交
2013/08/02 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
javascript判断用户浏览器插件安装情况的代码
2011/01/01 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
JS实现单击输入框弹出选择框效果完整实例
2015/12/14 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
js评分组件使用详解
2017/06/06 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
2017/11/21 Javascript
从零开始实现Vue简单的Toast插件
2018/12/03 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
Python生成pdf文件的方法
2014/08/04 Python
Python字符串格式化
2015/06/15 Python
Python 列表(List) 的三种遍历方法实例 详解
2017/04/15 Python
python reduce 函数使用详解
2017/12/05 Python
python搭建服务器实现两个Android客户端间收发消息
2018/04/12 Python
Python sklearn KFold 生成交叉验证数据集的方法
2018/12/11 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
浅谈Python爬虫基本套路
2019/03/25 Python
Python使用get_text()方法从大段html中提取文本的实例
2019/08/27 Python
用Python绘制漫步图实例讲解
2020/02/26 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
SmartBuyGlasses丹麦:网上购买名牌太阳镜、眼镜和隐形眼镜
2016/10/01 全球购物
《最佳路径》教学反思
2014/04/13 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
促销活动计划书
2014/05/02 职场文书
授权收款委托书范本
2014/10/10 职场文书
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android