脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue2 Vue3 Scoped样式穿透

Vue2 Vue3 Scoped 样式穿透问题

 更新时间：2025年01月16日 15:59:15   投稿：jingxian  
Vue中scoped样式的作用是通过在DOM结构和CSS样式上添加唯一标记来实现样式私有化和模块化,这一功能是通过PostCSS转译实现的,总结了三条渲染规则：1. 为HTML DOM节点添加不重复的data属性；2. 在每个CSS选择器末尾添加当前组件的data属性选择器

概念

主要是用于修改很多 Vue 常用的组件库（Element, Vant, AntDesigin），虽然配好了样式但是还是需要更改其他的样式， 因为添加了 scoped 实现 css 模块化

就需要用到 样式穿透 ，更改组件的样式

scoped 的原理

Vue 中的 scoped 通过在 DOM结构以及 css 样式上加唯一不重复的标记: data-v-hash 的方式，以保证唯一（而这个工作是由过 PostCSS 转译实现的），达到 样式私有化模块化的目的。

简单示例代码如下

<template>
  <div>
    <el-input placeholder="Please input" class="ipt" />
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.ipt {
  width: 300px;
  margin: 100px 400px;
}
</style>

总结一下 scoped 三条渲染规则

1.给 HTML 的 DOM 节点加一个不重复 data 属性(形如：data-v-123)来表示他的唯一性

2. 在每个 CSS 选择器的末尾（编译后的生成的 CSS 语句）加一个当前组件的 data 属性选择器（如 [data-v-123]）来私有化样式

3. 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上当前组件的 data 属性

注意：

<template>
  <div>
    <el-input placeholder="Please input" class="ipt" />
  </div>
</template>

<script setup lang="ts">
</script>

<style scoped lang="less">
.ipt {
  width: 300px;
  margin: 100px 400px;
  .el-input__inner {
    background-color: red;
  }
}
</style>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • 利用vue-router实现二级菜单内容转换

    利用vue-router实现二级菜单内容转换

    这篇文章主要介绍了如何利用vue-router实现二级菜单内容转换,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-11-11
  • Vue实现数据请求拦截

    Vue实现数据请求拦截

    这篇文章主要为大家详细介绍了Vue实现数据请求拦截，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 详解Vue与VueComponent的关系

    详解Vue与VueComponent的关系

    这篇文章主要为大家介绍了Vue与VueComponent的关系，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • Element的el-tree控件后台数据结构的生成以及方法的抽取

    Element的el-tree控件后台数据结构的生成以及方法的抽取

    这篇文章主要介绍了Element的el-tree控件后台数据结构的生成以及方法的抽取，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03
  • vue服务端渲染操作简单入门实例分析

    vue服务端渲染操作简单入门实例分析

    这篇文章主要介绍了vue服务端渲染操作,结合简单实例形式分析了vue.js服务端渲染操作的原理、实现方法及相关操作注意事项,需要的朋友可以参考下
    2019-08-08
  • vue源码学习之Object.defineProperty 对数组监听

    vue源码学习之Object.defineProperty 对数组监听

    这篇文章主要介绍了vue源码学习之Object.defineProperty 对数组监听，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 一文了解vue-router之hash模式和history模式

    一文了解vue-router之hash模式和history模式

    这篇文章主要介绍了一文了解vue-router之hash模式和history模式,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-05-05
  • Vue ECharts饼图实现方法详解

    Vue ECharts饼图实现方法详解

    这篇文章主要介绍了在vue.js中，使用echarts组件，创建一个饼图，并且获取饼图的数据和属性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • 页面刷新后Vuex状态丢失的完整解决方案

    页面刷新后Vuex状态丢失的完整解决方案

    当页面刷新时,Vuex 的 state 数据会丢失,这是因为 Vuex 的状态存储在内存中,刷新浏览器会重置 JavaScript 的运行环境,下面我将详细介绍几种解决方案,从简单到复杂,帮助你根据项目需求选择最适合的方法,需要的朋友可以参考下
    2025-04-04
  • Vue3如何在setup中获取元素引用(ref)

    Vue3如何在setup中获取元素引用(ref)

    这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-07-07

最新评论