生效的方法:在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; } 正如你所见,它生效了。...
1.父组件App.vue中代码 :deep(.title3){background-color:antiquewhite;} 2.子组件中的代码 <template>受父组件影响的内容</template> 还有一点让我觉得新鲜,CSS中颜色的色块有两个。
问题所在:package.json文件 {代码...} vue-loader和 vue-style-loader 版本过低升级为 {代码...} 以上版本可以解决深度选择器不生效问题
::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:...
如果项目使用的是css 原生样式,那么你可以直接使用 穿透修改即可 /*编译前*/.a >>> .b {}/*编译后*/.a[data-v-f3f3eg9] .b {} vue项目中用到了预处理器 scss 、sass、less 操作符 可能会因为无法编译而报错 。可以使用 /deep/穿透即可,但是vue-cli3可能会导致变异报错。这个时候用::v-deep /*...