特殊日期 App页面置灰设置
开始写这个需求的时候需求不是很明确,产品说要整个App页面都置灰
思路:后台管理端有个置灰按钮,打开后传给前端一个状态 true、false或者0、1都可以,
传给前端后前端根据这个状态判断,设置 filter: grayscale(100%);
app.vue中:
<div id="app" :style="setStyles == '0' ? 'filter: grayscale(100%);' : ''" >
...
</div>
发现这样设置后有的 position: fixed会失效
把 filter: grayscale(100%);设置在html上就ok了
后面上测试g产品又说只要首页置灰,其他页面不变,emm…
data() {
return {
setStyles: "1", //0 开 1关
routerPath: ""
}
},
watch: {
'$route' (to, from){
// console.log('当前页面路由:' + to.path);
// console.log('上一个路由:' + from.path);
//获取是否置灰
this.getSetStyle()
if(to.path == '/home/index') {
this.routerPath = "/home/index"
}else {
this.routerPath = ""
}
},
},
methods:{
//设置置灰
getSetStyle() {
setStyle(this.pageVo).then(res => {
if(res.data.code == 200) {
this.setStyles = res.data.obj.status.toString();
if(res.data.obj.status == 0 && this.routerPath == '/home/index') {
let html_box = document.getElementById("html-box")
html_box.style.filter = "grayscale(100%)"
}else {
let html_box = document.getElementById("html-box")
html_box.style.filter = "grayscale(0)"
}
}else {
this.$toast.fail(res.data.msg)
}
})
},
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/15416aa73101486291ded0b217a7aeec.png#pic_center