简介: el-dialog使用::v-deep()穿透设置样式不生效,解决办法亲测有效!场景: <el-dialog v-model="dialogVisible" width="800px" :before-close="beforeClose" append-to-body :close-on-click-modal="false" title="增加文档" > <template #footer> <div style="text-align:center"> <el-button type=...
直接在 dialog 上面增加class 我试过,也不起作用,最后用这种方法解决的,dialog 外面直接包一层 div 需求:el-dialog_body的上下内边距padding变为 0 不生效的情况: <template> <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose" > </el-dialog> </template> <sty...
检查浏览器控制台是否有任何相关的错误信息或警告,这些可能会给出为什么 :deep() 不生效的线索。 5. 尝试其他解决方案 如果上述步骤都未能解决问题,可以尝试以下几种方法: 添加全局样式:如果 el-dialog 是第三方组件,并且它的样式不在你的组件作用域内,你可能需要在全局样式中定义这些样式。但请注意,这可能会导致...
<template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="dialogVisible = false" >Confirm</el-button > </span> </template> </el-dialog> </div> </template> <style scoped> :deep(.el-dialog__bod...
使用:deep(<内部选择器>)而不是::v-deep<内部选择器>。 需要改成:deep(class),示例代码如下 :deep(.el-checkbox__label){ font-size: 16px !important; } :deep(.apiSecretDialog .el-dialog__footer){ padding-top: 0; text-align: center; } 好文要顶 关注我 收藏该文 风花一世月 粉丝- 5 ...
.my-dialog[data-v-0a1304a6] .el-dialog /deep/ .el-dialog__body { height: 600px; } 嵌套使用/deep/只会让第一个/deep/生效,第二个是不作处理的,之前没意识到这个问题犯错了。 问题重现 为了重现问题,特意下载了便携版chrome(v88)来对比(为了防止中毒,还额外研究了windows下沙盒,在沙盒里...
<style lang="scss" scoped> .el-dialog :deep(.el-dialog__body) { height: 500px; overflow: auto; } </style> 上面代码不生效的原因是 .el-dialog 并不是当前组件中的 class。它是 element plus 组件中的 class。编译当前 .vue 文件时它没有被当前 .vue 中 template 元素匹配到。 可以这么写 style...
::v-depth用作组合子已被弃用。使用:deep(<内部选择器>)而不是::v-deep<内部选择器>。 需要改成:deep(class),示例代码如下 代码语言:javascript 复制 :deep(.el-checkbox__label){font-size:16px!important;}:deep(.apiSecretDialog.el-dialog__footer){padding-top:0;text-align:center;}...
发现使用chrome最新版(v89),有个别样式出现了问题,排查定位后发现是有些错误地嵌套使用/deep/,在v88下是没问题的,但在v89下就出现了问题,不再生效。我们使用VUE框架,ElementUI组件库,Dialog控件样式(SCSS)写成了: 1 234567.my-dialog{ /deep/ .el-dialog { /deep/ .el-dialog__body{ height: 600px; } ...