vue3使用深度選擇器修改樣式問題
vue3使用深度選擇器修改樣式
解決警告：
[@vue/compiler-sfc] the >>> and /deep/ combinators have been deprecated. Use :deep() instead.
vue3已棄用以往的深度選擇器
- 警告： the >>> and /deep/ combinators have been deprecated. Use :deep() instead. 翻譯過來就是 “>>>和/deep/已經(jīng)被棄用。使用方法:deep()。”
- 雖然以往的>>>和/deep/依然可以使用，但是會出現(xiàn)警告語句提示
- 要是不想看到警告的話可以使用 “:deep()” 即可
例子：
/deep/ .el-button.is-round {
? ? padding: 4px 20px;
? ? background-color: #109cf1;
}
/*改為如下書寫方式即可 */
:deep(.el-button.is-round) {
? ? padding: 4px 20px;
? ? background-color: #109cf1;
}當有并集選擇器，直接把類名放入 :deep() 括號中是不太對的：
/*如下修改只能改到第一個類名，修改不到第二個類名 */
:deep(.el-input__inner，
.el-button.is-round) {
? ? width: 440px;
? ? height: 60px;
? ? line-height: 20px;
? ? border-radius: 30px;
? ? border: 1px solid rgba(211, 211, 211, 100);
? ? font-size: 16px;
}
/*應(yīng)改為 */
:deep(.el-input__inner),
:deep(.el-button.is-round) {
? ? width: 440px;
? ? height: 60px;
? ? line-height: 20px;
? ? border-radius: 30px;
? ? border: 1px solid rgba(211, 211, 211, 100);
? ? font-size: 16px;
}vue如何使用深度選擇器？
在作用域 css 中，如果您需要使用深度選擇器（即來自父作用域 css）修改子組件的樣式，那么您需要使用>>>組合器。
例如，父作用域 css 上的作用域深度選擇器如下所示，
<style scoped>
.class1 >>> .class2 { /* ... */ }
</style>它將被轉(zhuǎn)換為，
.class1[data-v-f3f3eg9] .class2 { /* ... */ }注意：如果您使用 SASS 等預(yù)處理器，則它可能無法正確處理 >>>。在這種情況下，使用 /deep/ 或 ::v-deep 組合器代替 >>> 組合器。
父樣式是否泄漏到作用域 css 中的子組件中？
父組件的樣式不會泄漏到子組件中。但是子組件的根節(jié)點會同時受到父級作用域 CSS 和子級作用域 CSS 的影響。即，您的子組件的根元素有一個類也存在于父組件中，父組件的樣式將泄漏給子組件。無論如何，這是設(shè)計使然，以便父級可以為子根元素設(shè)置樣式以用于布局目的。
例如，父組件的背景顏色屬性泄漏到子組件中，如下所示，
//parent.vue
<template>
? <div class="wrapper">
? ? <p>parent</p>
? ? <ChildMessageComponent/>
? </div>
</template>
<script>
import ChildMessageComponent from "./components/child";
export default {
? name: "App",
? components: {
? ? ChildMessageComponent
? }
};
</script>
<style scoped>
.wrapper {
? background: blue;
}
</style>
//child.vue
<template>
? <div class="wrapper">
? ? <p>child</p>
? </div>
</template>
<script>
export default {
? name: "Hello, Scoped CSS",
};
</script>
<style scoped>
.wrapper {
? background: red;
}
</style>現(xiàn)在子包裝器的背景顏色將變?yōu)樗{色而不是紅色。
如何在 vuejs 中使用 CSS 模塊？
以下是在 VueJS 中使用 css 模塊的步驟，
啟用 CSS 模塊： CSS 模塊必須通過將 modules: true 選項傳遞給 css-loader 來啟用
// webpack.config.js
{
? module: {
? ? rules: [
? ? ? // ... other rules omitted
? ? ? {
? ? ? ? test: /\.css$/,
? ? ? ? use: [
? ? ? ? ? 'vue-style-loader',
? ? ? ? ? {
? ? ? ? ? ? loader: 'css-loader',
? ? ? ? ? ? options: {
? ? ? ? ? ? ? // enable CSS Modules
? ? ? ? ? ? ? modules: true,
? ? ? ? ? ? ? // customize generated class names
? ? ? ? ? ? ? localIdentName: '[local]_[hash:base64:8]'
? ? ? ? ? ? }
? ? ? ? ? }
? ? ? ? ]
? ? ? }
? ? ]
? }
}添加模塊屬性：將模塊屬性添加到您的<style>
<style module>
.customStyle {
? background: blue;
}
</style>注入 CSS 模塊：您可以使用計算屬性 $style 注入 CSS 模塊對象
<template> ? <div :class="$style.blue"> ? ? Background color should be in blue ? </p> </template>
它可以使用 :class 綁定的對象/數(shù)組語法。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了詳解vue中引入stylus及報錯解決方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
在Vue中，修飾符處理了許多DOM事件的細節(jié)，讓我們不再需要花大量的時間去處理這些煩惱的事情，而能有更多的精力專注于程序的邏輯處理2022-10-10
這篇文章主要為大家介紹了Vue3使用Swiper實現(xiàn)輪播圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue+rem自定義輪播圖效果，手指觸摸左滑和右滑，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析
這篇文章主要介紹了vue+element-ui JYAdmin后臺管理系統(tǒng)模板解析，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
文章介紹了Vue中的v-model實現(xiàn)原理,包括數(shù)據(jù)監(jiān)聽和UI通知,通過綁定props.modelValue和使用update:modelValue,子組件可以實現(xiàn)數(shù)據(jù)變更通知父組件,Vue3提供了defineModel來簡化v-model的定義,并支持自定義v-model變量名,感興趣的朋友一起看看吧2025-01-01
vue vantUI實現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件）
這篇文章主要介紹了vue vantUI實現(xiàn)文件（圖片、文檔、視頻、音頻）上傳（多文件），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼
Vue3的Hooks是一種新的 API,本文主要介紹了Vue3+Hooks實現(xiàn)4位隨機數(shù)和60秒倒計時的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-04-04