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

更新時(shí)間：2023年05月30日 15:54:20 作者：蓓蕾心晴

這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

解決方案：

兩種：

第一種：

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

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

export default {
? components: {
? ? Map
? },
? beforeRouteEnter (to, form, next) { // 進(jìn)入本頁面時(shí)隱藏面包屑
? ? let bread = document.getElementsByClassName('main-layout-tag-nav-wrapper')
? ? if (bread.length > 0) bread[0].style.display = 'none'
? ? next()
? },
? beforeRouteLeave (to, form, next) { // 離開本頁面時(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: