脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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如何在线预览各类型文件

    vue如何在线预览各类型文件

    这篇文章主要介绍了vue如何在线预览各类型文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue实现监控视频直播的示例代码

    vue实现监控视频直播的示例代码

    本文主要介绍了vue实现监控视频直播的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Vue关闭当前页面的方法

    Vue关闭当前页面的方法

    Vue中关闭当前页面的方法与原生JavaScript类似,都是通过window对象的close方法实现,这篇文章主要介绍了Vue关闭当前页面的方法,需要的朋友可以参考下
    2023-09-09
  • vue项目实现减少app.js和vender.js的体积操作

    vue项目实现减少app.js和vender.js的体积操作

    这篇文章主要介绍了vue项目实现减少app.js和vender.js的体积操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue中配置使用process.env详解

    Vue中配置使用process.env详解

    process.env 是 Node.js 中的一个环境对象，其中保存着系统的环境的变量信息，可使用 Node.js 命令行工具直接进行查看，这篇文章主要介绍了Vue中配置process.env详解,需要的朋友可以参考下
    2023-03-03
  • vue实现百度下拉列表交互操作示例

    vue实现百度下拉列表交互操作示例

    这篇文章主要介绍了vue实现百度下拉列表交互操作,结合实例形式分析了vue.js使用jsonp针对百度接口进行交互的相关操作技巧,需要的朋友可以参考下
    2019-03-03
  • vue DatePicker日期选择器时差8小时问题

    vue DatePicker日期选择器时差8小时问题

    这篇文章主要介绍了vue DatePicker日期选择器时差8小时问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • vue单页应用中如何使用jquery的方法示例

    vue单页应用中如何使用jquery的方法示例

    最近在工作中遇到的一个需求，需要在vue-cli建立的应用中引入jquery的方式，通过查找相关的资料最终解决了，所以这篇文章主要给大家介绍了关于在vue单页应用中如何使用jquery的方法示例，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • vue项目中使用ECharts,避免浏览器卡死的解决方案

    vue项目中使用ECharts,避免浏览器卡死的解决方案

    Vue中ECharts图表过多易导致页面卡死,建议全局引入并动态销毁实例,避免资源堆积,代码示例包含样式配置,可根据需求调整
    2025-07-07
  • Vue实现项目主题切换功能的两种方案详解

    Vue实现项目主题切换功能的两种方案详解

    在现代前端项目开发中,主题切换已成为提升用户体验的核心功能之一,无论是适配用户白天 / 夜间的使用场景、满足企业级产品的品牌定制需求,还是应对不同设备的显示环境,灵活的主题系统都能让产品更具竞争力,所以本文介绍了Vue实现项目主题切换功能的两种方案
    2025-09-09

最新评论