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/無效內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Vue.js綁定HTML class數(shù)組語法錯誤的原因分析
Vue.js綁定HTML class數(shù)組語法錯誤有哪些原因導致的呢，該如何解決呢？下面小編給大家分享Vue.js綁定HTML class數(shù)組語法錯誤的原因分析，感興趣的朋友一起看看吧2016-10-10
在開發(fā)過程中發(fā)現(xiàn)路徑中帶有/#/的標示,而且還去不掉,很丑陋,下面這篇文章主要給大家介紹了vue項目如何去掉URL中#符號的相關資料,文中通過實例代碼的非常詳細,需要的朋友可以參考下2022-07-07
最近在Vue項目中引入高德地圖,實現(xiàn)地圖展示與交互的方法和技術,這里跟大家分享下,這篇文章主要給大家介紹了關于前端Vue3引入高德地圖并展示行駛軌跡動畫的相關資料,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)觸底判斷，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
vue實現(xiàn)動態(tài)綁定行內樣式style的backgroundImage
這篇文章主要介紹了vue實現(xiàn)動態(tài)綁定行內樣式style的backgroundImage方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
本文分步驟給大家介紹了基于vue cli重構多頁面腳手架過程，非常不錯，具有參考借鑒價值，需要的朋友參考下2018-01-01
vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決
這篇文章主要介紹了vue/cli3.0腳手架部署到nginx時頁面空白的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue3配置axios跨域實現(xiàn)過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11
在這篇文章中，大家會了解到如何在 Vue 組件中使用防抖和節(jié)流控制 觀察者（watchers）以及事件處理程序，文中的示例代碼簡潔易懂，希望對大家有所幫助2023-03-03
這篇文章主要介紹了vue-cli中實現(xiàn)響應式布局的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03