<div class="modelBox" v-show="openMusicListFlag"></div>
watch: { // 使用watch監(jiān)聽,判斷彈出框是顯示狀態(tài)或隱藏狀態(tài)
openMusicListFlag: { // 布爾類型變量,是否展示彈框
handler (val) { // true:顯示彈出框精算,false:隱藏彈出框
if (val) {
document.querySelector('body').setAttribute('style', 'overflow:hidden;')
} else {
document.body.removeAttribute('style')
}
}
}
},
一般使用布爾類型控制彈出框顯示隱藏的話练对,可以使用watch監(jiān)聽控制樣式
1.使用document.querySelector(‘body’)找到節(jié)點(diǎn) body或者h(yuǎn)tml
2.setAttribute(‘style’, ‘overflow:hidden;’)設(shè)置該節(jié)點(diǎn)滾動(dòng)條隱藏樣式
3.彈出框關(guān)閉時(shí)記得清除背景頁滾動(dòng)條隱藏樣式document.body.removeAttribute(‘style’) 或
document.html.removeAttribute(‘style’)