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

时间 2019-11-08

标签 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模块.css
- 其实就是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
- 在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以后, 父组件的样式不会再深刻到自组件.vue
- 不过子组件的根节点同时受到 父组件有做用域的CSS 和 子组件有做用域的影响
- 可是有一点: 若是咱们在子组件上面添加了一个类样式就能向下一层层的进行修改
深度做用选择器: >>> 或者是 /deep/webpack
- 已验证: 在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标签的几个标识符

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

问题背景

问题由来

陷入点

问题详解

认识.vue的<style>标签

$style配合<module>如何工做

scoped的做用域是如何的

element中样式的混入方式 (todo)

解决过程

使用scopedSlots解决

添加scoped以后, 在子组件上面添加类样式名, 发现并无卵用

解决方案一: scoped方案

解决方案二: module方案

总结

认识`.vue`的`<style>`标签

`$style`配合`<module>`如何工做

`scoped`的做用域是如何的

使用`scopedSlots`解决

添加`scoped`以后, 在子组件上面添加类样式名, 发现并无卵用

解决方案一: `scoped`方案

解决方案二: `module`方案