欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue組件中修改組件外元素樣式的兩種解決方案

 更新時間：2023年05月30日 15:54:20   作者：蓓蕾心晴  
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題，結(jié)合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

在實際開發(fā)中，由于項目一開始設(shè)計的一些不合理性，會在組件中通過

html[media=pad]{
     .xxx{
     /* 組件樣式 */
     }
}

以上方式修改某些組件的樣式，這樣會涉及到從 html 層級選擇，由于我 style 標簽是這樣寫的

<style lang="less" scoped></style>

所以導致組件內(nèi)部無法修改或選中組件外部元素，則無法修改外部元素的樣式。

解決方案：

兩種：

第一種：

直接新開一個全局的 style 標簽

<style lang="less"></style>

在這里寫全局的樣式

第二種：

使用 :global

<style scoped>
:global(.red) {
  color: red;
}
</style>

參考官方文檔：https://cn.vuejs.org/api/sfc-css-features.html#scoped-css

vue動態(tài)改變組件外部元素樣式

主要還是通過原生的js來控制。

vue的主要開發(fā)對象是組件。組件內(nèi)部控制大家都輕車熟路，但組件外部呢？比如說改變組件外部元素樣式。

這種問題我前不久遇到過一個。就是有個頁面，承載了地圖。但頁面外部，是導航條啦，面包屑啦，標簽條啦，頂部占據(jù)了一大塊位置。you know，現(xiàn)在寬屏幕，垂直方向尺寸小的可憐，作為地圖，肯定是占據(jù)面積越大越好啊，現(xiàn)在頂部一大堆亂七八糟。關(guān)鍵是，這些東東是框架提供的，也沒有提供什么屬性進行設(shè)置。怎么辦？

主要是通過原生的js來控制。vue雖然作為一個開發(fā)框架，制訂了自己的一些語法規(guī)則，但原生的js它仍然支持。比如document.getElementById（），這種語句在組件方法里運行一點問題沒有。這些語句放在頁面進入時觸發(fā)：

export default {
? components: {
? ? Map
? },
? beforeRouteEnter (to, form, next) { // 進入本頁面時隱藏面包屑
? ? let bread = document.getElementsByClassName('main-layout-tag-nav-wrapper')
? ? if (bread.length > 0) bread[0].style.display = 'none'
? ? next()
? },
? beforeRouteLeave (to, form, next) { // 離開本頁面時恢復(fù)面包屑
? ? let bread = document.getElementsByClassName('main-layout-tag-nav-wrapper')
? ? if (bread.length > 0) bread[0].style.display = ''
? ? next()
? }
}

到此這篇關(guān)于vue組件中修改組件外元素樣式的文章就介紹到這了,更多相關(guān)vue修改組件外元素樣式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論