详解.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 相关文章推荐
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
extjs grid设置某列背景颜色和字体颜色的实现方法
Sep 06 Javascript
jQuery UI Datepicker length为空或不是对象错误的解决方法
Dec 19 Javascript
javascript之bind使用介绍
Oct 09 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
Nov 25 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
May 28 Javascript
json格式数据的添加,删除及排序方法
Jan 21 Javascript
Jil,高效的json序列化和反序列化库
Feb 15 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
javascript canvas实现雨滴效果
Jun 09 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
超级简单的发送邮件程序
2006/10/09 PHP
php SQL Injection with MySQL
2011/02/27 PHP
php将session放入memcached的设置方法
2014/02/14 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP经典面试题之设计模式(经常遇到)
2015/10/15 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
thinkPHP5分页功能实现方法分析
2017/10/25 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
extjs 为某个事件设置拦截器
2010/01/15 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
js获取事件源及触发该事件的对象
2013/10/24 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(基于jquery)
2015/11/18 Javascript
从零开始用electron手撸一个截屏工具的示例代码
2018/10/10 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python实现超市扫码仪计费
2018/05/30 Python
解决Tensorflow使用pip安装后没有model目录的问题
2018/06/13 Python
给大家整理了19个pythonic的编程习惯(小结)
2019/09/25 Python
python 画图 图例自由定义方式
2020/04/17 Python
python中return不返回值的问题解析
2020/07/22 Python
python 装饰器的基本使用
2021/01/13 Python
探讨HTML5移动开发的几大特性(必看)
2015/12/30 HTML / CSS
快速实现一个简单的canvas迷宫游戏的示例
2018/07/04 HTML / CSS
英国汽车座椅和婴儿车购物网站:Uber Kids
2017/04/19 全球购物
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
Fox Racing官方网站:越野摩托车和山地自行车装备和服装
2019/12/23 全球购物
美国排名第一的葡萄酒俱乐部:Firstleaf Wine Club
2020/01/02 全球购物
赔偿协议书范本
2014/04/15 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
园林系毕业生求职信
2014/06/23 职场文书
基层党员四风问题自我剖析材料
2014/09/29 职场文书
民事赔偿协议书
2014/11/02 职场文书
亲戚关系证明
2015/06/24 职场文书