新方法 更完美 原理是給需要改變樣式的頁面body標簽增加class
//main.js里面監控路由變化
router.beforeEach((to, from, next) => {
console.log('進入路由時') //next() //想進入路由必須調用一下這個方法 //next(false) //是不讓進入路由
//to.meta.danju 是路由定義時候的一個特征,如果此特征定義為true 則此頁面的css才會應用
if (to.meta.danju) {
document.querySelector('body').classList.add('danju')//給body增加一個css
next()
} else {
document.querySelector('body').classList.remove('danju')//移除body的css防止其他頁面變化
next()
}
})
//頁面內css 不要增加scoped標簽 ok實現功能!
<style>
.danju .el-popper {
background-color: #000000;
}
.danju .select_nocss{
padding: 0 !important;
margin: 0 !important;
}
</style>
以下方法也可實現 不過還是會有部分css無法應用 ,比如下拉框的css
原因如下圖:
效果:
.el-select {
border: none !important;
}
.el-select /deep/ .el-input {
border: none !important;
border-color: #fff;
}
.el-select /deep/ input {
border: none !important;
height: 25px !important;
line-height: 25px !important;
margin: 0;
padding: 0;
}
.el-select /deep/ .el-select__caret {
display: none !important;
}