• vue 中 style 的私有作用域 scoped 和深度作用选择器及 /deep/ 用法


    前言

    我们在用 vue 开发项目时,在给当前组件中的元素设置样式,为了不污染全局样式,一般会在当前组件的 <style> 标签中增加 scoped 属性,表明 CSS 只作用于当前组件中的元素。

    实现原理

    按 vue 官方解释,scoped 是通过使用 PostCSS 来实现以下转换,以达到不污染全局样式。

    <style scoped>
    .example {
        color: red;
    }
    </style>
    
    <template>
        <div class="example">hi</div>
    </template>

    转换为:

    <style>
    .example[data-v-f3f3eg9] {
        color: red;
    }
    </style>
    
    <template>
        <div class="example" data-v-f3f3eg9>hi</div>
    </template>
    

      

    分析后可知,PostCSS 处理组件 scoped 样式时,给 HTML 的 DOM 节点加一个不重复属性 data-v-f3f3eg9 标志唯一性。如果组件内部还有组件,只会给当前的组件增加类似属性,不影响组件内部引用的组件。

    深度作用选择器

    在使用 scoped 属性后,达到了样式的组件隔离作用,但是如果引用它的父组件,想修改/增加其样式时,只能通过深度作用选择器来实现。

    >>> 操作符:

    <style scoped>
    .a >>> .b { /* ... */ }
    </style>
    有些像 less、sass 之类的 css 预处理语言,无法正确解析 >>>。我们可以使用 /deep/ 操作符取而代之。

    /deep/ 操作符:

    <style lang="scss" scoped>
    .a {
        /deep/ .b {
            /* ... */
        }
    }
    </style>
    

      

    结束语

    深度作用选择器实际上违反了 scoped 属性的意义,且过多使用 scoped 会导致页面打包文件体积增大。实际开发中我们应该尽量避免或少使用。可以采用加 class 名称前缀的方式避免样式污染,如:ivu-row-flex-middle。

    路是自己走出来的,而不是选出来的。
  • 相关阅读:
    使用zipkin2在SpringCloud2.0环境下追踪服务调用情况
    Spring Cloud负载均衡:使用Feign作客户端负载均衡
    Spring Cloud负载均衡:使用zuul作服务器端负载均衡
    Word模板替换
    【转】Eureka集群
    巧用JavaScript语言特性解耦页面间调用(观察者模式)
    MySQL 视图触发器事务存储过程函数
    MySQL py模块的链接Navicat可视化工具
    MySQL 单表查询多表查询
    MySQL 表与表之间建立关系
  • 原文地址:https://www.cnblogs.com/mo3408/p/14414701.html
Copyright © 2020-2023  润新知