生效的方法:在el-dialog外面包一层 <template> <el-dialog v-model="dialogVisible" title="Tips" width="30%" :before-close="handleClose" > </el-dialog> </template> .dialog-pd { :deep(.el-dialog__body) { padding: 0 20px; } } 需要注意的是 :deep(这里面只能包一个)最后编辑于 ...
1. 确认:deep()的使用上下文是否正确 在Vue 2.x中,:deep()选择器实际上是Vue 3中引入的::v-deep的预览版,但在Vue 2.x中并不直接支持:deep()。在Vue 2中,通常使用>>>或/deep/作为深度选择器。然而,这些选择器并非CSS标准的一部分,而是特定于Vue的CSS作用域特性,并且依赖于vue-loader的转换...
写法有:::v-deep,>>>,:deep(),/deep/ 具体区分: 如果你使用的是css,没有使用css预处理器,则可以使用>>>,/deep/,::v-deep。 如果你使用的是less或者node-sass,那么可以使用/deep/,::v-deep都可以生效。 如果你使用的是dart-sass,那么就不能使用/deep/,而是使用::v-deep才会生效。 但是如果你是使用...
<template #footer> <el-button @click="dialogVisible = false">Cancel</el-button> <el-button type="primary" @click="dialogVisible = false" >Confirm</el-button > </template> </el-dialog> </template> :deep(.el-dialog__body) { background-color: red; } 正如你所见,它生效了。...
大概理解应该是/deep/基本上无效了,直接替换成“”空格,或者>>>代替处理; 于是,在项目中全局替换/deep/为空格,但是部分页面会有错乱问题,于是将替换为空格后,仍然无效的样式部分,添加>>>,居然可以了,但是对于Sass Less之类的预处理器是无法正确解析>>>的,所以要保证样式是css文件; ...
::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;}...
官方还说>>>可能存在问题Vue 2.x无效,建议用后两者,就选择 /deep/ 。 实现原理: 没加穿透前 .wrap .example { color: red; }.wrap .example[data-v-469af010] { color: red; } 加了穿透后: .wrap /deep/ .example { color: red; }.wrap[data-v-469af010] .example { color:...
当遇到 :deep 时,会将原来的属性选择器添加到前面元素中,即:.foo ::v-deep(.bar) -> [xxxxxxx] .foo .bar 通过这种方法就能定位到第三方 UI库中的 CSS 选择器了。 结语 在Vue3 中,当使用一些第三方的 UI 库时,由于 Vue3 实现了模块化封装,那么再设置 UI 库的 CSS 样式时有时会出现设置不成功的...
如果项目使用的是css 原生样式,那么你可以直接使用 穿透修改即可 /*编译前*/.a >>> .b {}/*编译后*/.a[data-v-f3f3eg9] .b {} vue项目中用到了预处理器 scss 、sass、less 操作符 可能会因为无法编译而报错 。可以使用 /deep/穿透即可,但是vue-cli3可能会导致变异报错。这个时候用::v-deep /*...