亲宝软件园·资讯

展开

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

JingLiii 人气:6

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

在人生就要绝望的时候, 被编辑器所提示的一个scopedSlots所拯救.

卧槽, 写到最后才发现这个属性的具体卵用. 详情见最后解决办法.

问题背景

问题由来

<template>
 <span :class="$style.text">
  ...
 </span>
</template>
<style module>
 .text {}
</style>

陷入点

问题详解

认识.vue<style>标签

这应该是关系到, vue-loader这个webpack的插件

$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语法.

<span :class="{[$style.red] : isRed}">
 测试
</span>
<script>
 data() {
  return {
   entries: [],
   isRed: true,
  };
 },
</script>
<style module>
 .red {
  color: red;
 }
</style>
<div :class="aaa.root">
</div>
<style lang="less" module="aaa">
</style>

scoped的作用域是如何的

<style></style>标签有scoped属性的时候, 他的css样式只作用在当前作用域

使用了scoped之后, 父组件的样式不会再深入到自组件.

深度作用选择器: >>> 或者是 /deep/

v-html动态生成的样式不受作用域内样式影响, 但我想应该加个类样式名称,可以解决.(未验证)

css的作用域的渲染方式, 远不如class的渲染速度

递归组件中, 小心使用CSS样式.

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

解决过程

使用scopedSlots解决

我擦哦, 再次测试后, 发现添加scopedSlots并没有什么卵用, 和什么都不写是他妈一个样子啊.. 我说怎么, 怎么查了半天, 也没人用.
还被这玩意所拯救, 也真是够了..
当时还骄傲了半天, 还以为是发现了新天地, 也真是6了.

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

错误依旧: 只是在表面层上的有一些data-v的注入

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

解决方案一:scoped方案

<style scoped>

.main_nav .el-menu .el-submenu >>> .el-submenu__title {
 background-color: red;
}
</style>

解决方案二: module方案

<style lang="less" module="aaa">
.red {
 .item {
  :global(.el-submenu__title) {
   background: red;
  }
 }
}
</style>

总结

加载全部内容

相关教程
猜你喜欢
用户评论