vue中使用/deep/失效的解决方法
更新时间：2022年11月22日 14:28:38 作者：怼怼你
这篇文章主要介绍了vue中使用/deep/失效的解决办法,使用了css预处理器，则可以使用/deep/， 如果/deep/ 无效，则使用 ::v-deep，本文给大家讲解的非常详细需要的朋友可以参考下
1. 若是没有使用像less, sass等这样的css预处理器， 那么是只能使用 >>>这样的css深度选择器
<style scoped>
.box >>> el.dialog {
}
</style>2. 若是使用了css预处理器，则可以使用/deep/， 如果/deep/ 无效，则使用 ::v-deep
<style scoped lang="scss">
.box /deep/ el.dialog {
}
</style>或
<style scoped lang="scss">
.box ::v-deep el.dialog {
}
</style>3. 如果使用了css预处理器，使用/deep/ 和::v-deep 都失效，那么需要看看style 上是不是没有加上 scoped。若加上了还是无效，那么就只能把代码写入全局css中了，但是需要注意用一个css类包裹起来，不然会改变很多全局样式。
<style>
.box .el-dialog {
}
</style>或
<style lang="scss">
.box .el-dialog {
}
</style>到此这篇关于vue中使用/deep/失效的解决办法的文章就介绍到这了,更多相关vue /deep/无效内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue.js绑定HTML class数组语法错误有哪些原因导致的呢，该如何解决呢？下面小编给大家分享Vue.js绑定HTML class数组语法错误的原因分析，感兴趣的朋友一起看看吧2016-10-10
在开发过程中发现路径中带有/#/的标示,而且还去不掉,很丑陋,下面这篇文章主要给大家介绍了vue项目如何去掉URL中#符号的相关资料,文中通过实例代码的非常详细,需要的朋友可以参考下2022-07-07
最近在Vue项目中引入高德地图,实现地图展示与交互的方法和技术,这里跟大家分享下,这篇文章主要给大家介绍了关于前端Vue3引入高德地图并展示行驶轨迹动画的相关资料,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了Vue组件实现触底判断，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-06-06
vue实现动态绑定行内样式style的backgroundImage
这篇文章主要介绍了vue实现动态绑定行内样式style的backgroundImage方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
本文分步骤给大家介绍了基于vue cli重构多页面脚手架过程，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-01
vue/cli3.0脚手架部署到nginx时页面空白的问题及解决
这篇文章主要介绍了vue/cli3.0脚手架部署到nginx时页面空白的问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue3配置axios跨域实现过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-11-11
在这篇文章中，大家会了解到如何在 Vue 组件中使用防抖和节流控制 观察者（watchers）以及事件处理程序，文中的示例代码简洁易懂，希望对大家有所帮助2023-03-03
这篇文章主要介绍了vue-cli中实现响应式布局的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
最新评论