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

 更新时间:2018年07月17日 10:51:40   作者:JingLiii  
这篇文章主要介绍了详解.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模块.
    • 其实就是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>只有modulescoped, 没有其他取巧方案
  • module形成一个代表属性的计算属性, 默认名称为$style, 其中的:global()可以进行这个区域下面的所有元素的选择.
  • scoped形成的作用域, 可以通过>>>来进行子组件的样式覆盖, 带只要原生的css支持.

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

相关文章

  • Vue cli+mui 区域滚动的实例代码

    Vue cli+mui 区域滚动的实例代码

    下面小编就为大家分享一篇Vue cli+mui 区域滚动的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • ES6 Proxy实现Vue的变化检测问题

    ES6 Proxy实现Vue的变化检测问题

    Vue3.0将采用ES6 Proxy的形式重新实现Vue的变化检测,在官方还没给出新方法之前,我们先实现一个基于Proxy的变化检测。感兴趣的朋友跟随小编一起看看吧
    2019-06-06
  • vue可视化大屏实现无线滚动列表飞入效果

    vue可视化大屏实现无线滚动列表飞入效果

    本文主要介绍了vue可视化大屏实现无线滚动列表飞入效果,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • vue-cli3项目在IE浏览器打开兼容问题及解决

    vue-cli3项目在IE浏览器打开兼容问题及解决

    这篇文章主要介绍了vue-cli3项目在IE浏览器打开兼容问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • vue3通过组合键实现换行操作的示例详解

    vue3通过组合键实现换行操作的示例详解

    这篇文章主要为大家详细介绍了vue3如何通过组合键,例如command+Enter、shift+Enter、alt + Enter,实现换行操作,感兴趣的可以了解下
    2024-03-03
  • Vue刷新修改页面中数据的方法

    Vue刷新修改页面中数据的方法

    今天小编就为大家分享一篇Vue刷新修改页面中数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue 2 和 Vue 3 中 toRefs函数的不用用法

    Vue 2 和 Vue 3 中 toRefs函数的不用用法

    Vue 是一款流行的JavaScript 框架,用于构建用户界面,在Vue2和 Vue3中,都存在一个名为toRefs的函数,但其行为在这两个版本中有所不同,这篇文章主要介绍了Vue2和Vue3中toRefs的区别,需要的朋友可以参考下
    2023-08-08
  • vue使用Sass时报错问题的解决方法

    vue使用Sass时报错问题的解决方法

    这篇文章主要介绍了vue使用Sass时报错问题的解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • vue实现页面自适应的常用4种方法

    vue实现页面自适应的常用4种方法

    前端页面自适应有很多方法可以实现,本文小编将为大家详细介绍四种常用的方法,并提供相应的代码示例,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10
  • vue组件表单数据回显验证及提交的实例代码

    vue组件表单数据回显验证及提交的实例代码

    今天小编就为大家分享一篇vue组件表单数据回显验证及提交的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08

最新评论