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

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

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

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

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

以上方式修改某些組件的樣式，這樣會(huì)涉及到從 html 層級(jí)選擇，由于我 style 標(biāo)簽是這樣寫的

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

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

解決方案：

兩種：

第一種：

直接新開一個(gè)全局的 style 標(biāo)簽

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

在這里寫全局的樣式

第二種：

使用 :global

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

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

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

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

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

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

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

export default {
? components: {
? ? Map
? },
? beforeRouteEnter (to, form, next) { // 進(jìn)入本頁(yè)面時(shí)隱藏面包屑
? ? let bread = document.getElementsByClassName('main-layout-tag-nav-wrapper')
? ? if (bread.length > 0) bread[0].style.display = 'none'
? ? next()
? },
? beforeRouteLeave (to, form, next) { // 離開本頁(yè)面時(shí)恢復(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論