-
解决方案 - 当前页面新增不带scope的style标签
<style lang="scss"> // pdf-preview 是dialog新增的class类名 .pdf-preview { .el-dialog__body { padding: 0; } } </style>
-
场景复现
使用:deep() 添加样式无效
<template> <el-dialog v-model="dialogVisible" width="70%" top="5vh" append-to-body class="pdf-preview" > xxx </el-dialog> <template> <style lang="scss" scoped> .pdf-preview { :deep() { padding: 0; } } </style>
-
问题原因
3.1. 网上搜索说dialog需要一个div包裹
<template> <div> <el-dialog v-model="dialogVisible" width="70%" top="5vh" append-to-body class="pdf-preview" > xxx </el-dialog> </div> <template> <style lang="scss" scoped> .pdf-preview { :deep() { padding: 0; } } </style>
原因:使用
scoped
的时候,在 html 的标签中会生成data-v-xxx
的一个属性,样式穿透就是利用的这个属性生成的css;而在 vue3 中,我们可以在
template
下不使用一个标签来包裹全部内容,而此时el-dialog
在第一层的情况下就没有对应的data-v-xxx
父级元素标签,所以样式穿透也就无效了.但是对于我们的案例还是不生效
3.2. 使用全局样式去覆盖 - 生效
<style lang="scss"> // pdf-preview 是dialog新增的class类名 .pdf-preview { .el-dialog__body { padding: 0; } } </style>
原因:因为使用append-to-body属性,导致即使按照穿透的规则找了,但是Dialog元素脱离了当前文档结构,跑到Body标签下面去了,所以还是无效。
VUE3 无法修改 el-dialog 样式
最新推荐文章于 2024-07-29 14:30:00 发布