::v‐deep - daniel-qa/Vue GitHub Wiki

::v-deep

::v-deep 是 Vue 特有的一个深度选择器，它允许你穿透 Vue 单文件组件（SFC）的样式封装，修改子组件或外部库（如 Element UI）中的嵌套元素样式。

  • 为什么需要 ::v-deep？

    在 Vue 单文件组件（SFC）中，CSS 默认是 scoped 的，意味着它只作用于当前组件内的 DOM 元素，避免了全局样式污染。

    当你使用第三方组件库（如 Element UI）时，这些库的样式通常不会受到当前组件的 scoped 样式影响，导致你无法直接修改它们的样式。

    ::v-deep 使你能够“穿透”这个样式封装，选择并修改嵌套的子组件的样式。

    例如，当你想调整 el-radio（Element UI）组件的内嵌样式时，::v-deep 可以帮助你做到这一点。

  • 语法和使用

    ::v-deep 是一个 Vue 特有的深度选择器，通常用在 <style scoped> 标签中，来修改子组件或者外部组件库的样式。 它的作用是可以选择到嵌套在组件内部的子元素或外部库中的元素，打破样式的封装。

  • 示例：修改 Element UI 单选框样式

假设你使用了 Element UI 库，并想要调整其中的 el-radio 元素，修改它的字体大小、选中状态的颜色等。你可以通过 ::v-deep 来实现。

<template>
  <div>
    <el-card class="card">
      <template #header>
        <span>選擇發送類型</span>
      </template>
      <el-radio-group v-model="firstCardSelection" class="radio-group">
        <el-radio label="option1">端外通知</el-radio>
        <el-radio label="option2">Email</el-radio>
        <el-radio label="option3">簡訊</el-radio>
      </el-radio-group>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      firstCardSelection: 'option1',
    };
  },
};
</script>

<style scoped>
/* 使用 ::v-deep 修改 el-radio 样式 */
::v-deep .el-radio-group {
  font-size: 18px; /* 调整整个单选框组的字体大小 */
}

::v-deep .el-radio {
  font-size: 20px; /* 调整单个 el-radio 组件的字体大小 */
}

::v-deep .el-radio__input {
  width: 18px; /* 调整单选框按钮的大小 */
  height: 18px;
}

::v-deep .el-radio__inner {
  border-width: 2px; /* 修改单选框内圆的边框宽度 */
  border-color: #409EFF; /* 修改圆的边框颜色 */
}

::v-deep .el-radio__label {
  font-size: 18px; /* 增大标签文本字体 */
  color: #333; /* 修改文本颜色 */
}

::v-deep .el-radio.is-checked .el-radio__inner {
  background-color: #409EFF; /* 修改选中时的背景颜色 */
  border-color: #409EFF; /* 修改选中时的边框颜色 */
}

::v-deep .el-radio.is-checked .el-radio__label {
  color: #409EFF; /* 修改选中时的标签文本颜色 */
}
</style>

v-deep - 深度选择器在vue3不生效的問題

直接用全域修改

/* global.css 或在 scoped 样式外部 */
<style>
.el-radio__label {
  font-size: 18px;
}
</style>

  • SFC ; Single File Component（单文件组件）

    SFC 是 Vue.js 提供的一种组织代码的方式，用于在一个文件中包含 HTML 模板、JavaScript 逻辑 和 CSS 样式。这种结构使得 Vue 组件更易于管理和维护，同时也使得开发者可以清晰地把各部分内容集中在一个文件中，增强了开发体验。

  • Vue SFC 结构

    Vue 单文件组件（SFC）包含三个主要部分：

模板（Template）：定义了组件的 HTML 结构。
脚本（Script）：包含组件的 JavaScript 逻辑，如数据、方法、生命周期钩子等。
样式（Style）：为组件添加 CSS 样式，通常是 scoped（局部作用域）样式，只作用于当前组件。
⚠️ **GitHub.com Fallback** ⚠️