Vue2 Vue3 Scoped 樣式穿透問(wèn)題
概念
主要是用于修改很多 Vue 常用的組件庫(kù)（Element, Vant, AntDesigin），雖然配好了樣式但是還是需要更改其他的樣式， 因?yàn)樘砑恿?scoped 實(shí)現(xiàn) css 模塊化
就需要用到 樣式穿透 ，更改組件的樣式
scoped 的原理
Vue 中的 scoped 通過(guò)在 DOM結(jié)構(gòu)以及 css 樣式上加唯一不重復(fù)的標(biāo)記: data-v-hash 的方式，以保證唯一（而這個(gè)工作是由過(guò) PostCSS 轉(zhuǎn)譯實(shí)現(xiàn)的），達(dá)到 樣式私有化模塊化的目的。
簡(jiǎn)單示例代碼如下
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped>
.ipt {
width: 300px;
margin: 100px 400px;
}
</style>總結(jié)一下 scoped 三條渲染規(guī)則
1.給 HTML 的 DOM 節(jié)點(diǎn)加一個(gè)不重復(fù) data 屬性(形如：data-v-123)來(lái)表示他的唯一性
2. 在每個(gè) CSS 選擇器的末尾（編譯后的生成的 CSS 語(yǔ)句）加一個(gè)當(dāng)前組件的 data 屬性選擇器（如 [data-v-123]）來(lái)私有化樣式
3. 如果組件內(nèi)部包含有其他組件，只會(huì)給其他組件的最外層標(biāo)簽加上當(dāng)前組件的 data 屬性
注意：
<template>
<div>
<el-input placeholder="Please input" class="ipt" />
</div>
</template>
<script setup lang="ts">
</script>
<style scoped lang="less">
.ipt {
width: 300px;
margin: 100px 400px;
.el-input__inner {
background-color: red;
}
}
</style>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何在線預(yù)覽各類(lèi)型文件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼
本文主要介紹了vue實(shí)現(xiàn)監(jiān)控視頻直播的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue中關(guān)閉當(dāng)前頁(yè)面的方法與原生JavaScript類(lèi)似,都是通過(guò)window對(duì)象的close方法實(shí)現(xiàn),這篇文章主要介紹了Vue關(guān)閉當(dāng)前頁(yè)面的方法,需要的朋友可以參考下2023-09-09
vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作
這篇文章主要介紹了vue項(xiàng)目實(shí)現(xiàn)減少app.js和vender.js的體積操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
process.env?是?Node.js?中的一個(gè)環(huán)境對(duì)象，其中保存著系統(tǒng)的環(huán)境的變量信息，可使用?Node.js?命令行工具直接進(jìn)行查看，這篇文章主要介紹了Vue中配置process.env詳解,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue實(shí)現(xiàn)百度下拉列表交互操作,結(jié)合實(shí)例形式分析了vue.js使用jsonp針對(duì)百度接口進(jìn)行交互的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
vue DatePicker日期選擇器時(shí)差8小時(shí)問(wèn)題
這篇文章主要介紹了vue DatePicker日期選擇器時(shí)差8小時(shí)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue單頁(yè)應(yīng)用中如何使用jquery的方法示例
最近在工作中遇到的一個(gè)需求，需要在vue-cli建立的應(yīng)用中引入jquery的方式，通過(guò)查找相關(guān)的資料最終解決了，所以這篇文章主要給大家介紹了關(guān)于在vue單頁(yè)應(yīng)用中如何使用jquery的方法示例，需要的朋友可以參考借鑒，下面來(lái)一起看看吧。2017-07-07
vue項(xiàng)目中使用ECharts,避免瀏覽器卡死的解決方案
Vue中ECharts圖表過(guò)多易導(dǎo)致頁(yè)面卡死,建議全局引入并動(dòng)態(tài)銷(xiāo)毀實(shí)例,避免資源堆積,代碼示例包含樣式配置,可根據(jù)需求調(diào)整2025-07-07
Vue實(shí)現(xiàn)項(xiàng)目主題切換功能的兩種方案詳解
在現(xiàn)代前端項(xiàng)目開(kāi)發(fā)中,主題切換已成為提升用戶(hù)體驗(yàn)的核心功能之一,無(wú)論是適配用戶(hù)白天?/?夜間的使用場(chǎng)景、滿(mǎn)足企業(yè)級(jí)產(chǎn)品的品牌定制需求,還是應(yīng)對(duì)不同設(shè)備的顯示環(huán)境,靈活的主題系統(tǒng)都能讓產(chǎn)品更具競(jìng)爭(zhēng)力,所以本文介紹了Vue實(shí)現(xiàn)項(xiàng)目主題切換功能的兩種方案2025-09-09