【Vue bug】:deep()失效

vue 组件中使用了 element-plus 组件

vue 复制代码
<template>
	<el-dialog
        :model-value="visible"
        :title="title"
        :width="width + 'px'"
        :before-close="onClose"
    >
      <div class="container" :style="{height:height + 'px'}">
        <slot name="content"></slot>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button plain type="danger" @click="onClose">取消</el-button>
          <el-button plain type="primary" @click="onConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
// 组件内自定义的 elementplus 的样式,
:deep(.el-dialog){
  border-radius: 10px!important;
  background-color: #535bf2;
}

使用了:deep()失效

bug 剖析

1. 组件的样式与第三方子组件样式的加载顺序

  • 若第三方子组件是完全引入的,比如 element-plus:子组件在应用启动的时候,样式就加载了
  • 若第三方子组件是按需导入的,那么先加载组件,然后加载子组件。

2. 样式中scoped

当在一个Vue SFC的<style>标签中添加scoped属性时,Vue编译器会为该组件内的所有元素添加一个唯一的属性(例如data-v-f3f3eg9),同时修改样式规则以匹配这个属性。这意味着这些样式只会应用于当前组件内的元素,而不会影响全局或其他组件中的相同类名或标签。

示例:

vue 复制代码
<template>
  <div class="example">Hello, scoped CSS!</div>
</template>

<style scoped>
.example {
  color: red;
}
</style>

编译后可能会变成类似这样:

vue 复制代码
<template>
  <div class="example" data-v-f3f3eg9>Hello, scoped CSS!</div>
</template>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

3. :deep()失效原因

vue 复制代码
<template>
	<el-dialog
        :model-value="visible"
        :title="title"
        :width="width + 'px'"
        :before-close="onClose"
    >
      <div class="container" :style="{height:height + 'px'}">
        <slot name="content"></slot>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button plain type="danger" @click="onClose">取消</el-button>
          <el-button plain type="primary" @click="onConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
// 组件内自定义的 elementplus 的样式,
:deep(.el-dialog){
  border-radius: 10px!important;
  background-color: #535bf2;
}
  1. 子组件是完全引入的,那么先加载子组件,后加载该组件。
  2. 组件的<template></template>中只含有子组件,那么组件的样式会覆盖子组件的样式
  3. 加载父组件的时候,由于子组件已加载完成,Vue 编译器无法为组件中的元素(即子组件)添加唯一属性,也就无法将组件的样式绑定到子组件。
    故,使用:deep(),样式依然失效。

解决办法

在组件的<template></template>中,将子组件放入到<div></div>标签中,那么在加载组件的时候,组件的样式会绑定到<div></div>标签上。

vue 复制代码
<template>
  <div>
    <el-dialog
        :model-value="visible"
        :title="title"
        :width="width + 'px'"
        :before-close="onClose"
    >
      <div class="container" :style="{height:height + 'px'}">
        <slot name="content"></slot>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button plain type="danger" @click="onClose">取消</el-button>
          <el-button plain type="primary" @click="onConfirm">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
相关推荐
Hello-Mr.Wang4 分钟前
基于 Vue3 与 exceljs 实现自定义导出 Excel 模板
前端·vue.js·excel
Raink老师41 分钟前
1.3 如何安装 TypeScript?
前端·javascript·typescript
ST_小罗1 小时前
【Web前端】JavaScript入门与基础(二)
开发语言·前端·javascript
Greatlifeee1 小时前
VUE3+TS实现图片缩放移动弹窗
前端·javascript·vue.js
恰恰兄1 小时前
base 西安 | 前端面试问题汇总 (2023年8月)
前端·面试·职场和发展
笔直向前冲1 小时前
el-table控制type=“expand“展开列 根据条件显示或隐藏展开按钮
javascript·vue.js·elementui
萧萧风1 小时前
在Vue3 + Vite 项目安装使用 Tailwind CSS 4.0报错
前端·css
忘不了情2 小时前
vue2中,codemirror编辑器的使用
前端·javascript·编辑器
虾球xz2 小时前
游戏引擎学习第308天:调试循环检测
前端·c++·学习·算法·游戏引擎
魔云连洲2 小时前
浏览器强缓存还未过期,但服务器资源已经变了怎么办?
前端·缓存·浏览器