特殊日期 App页面置灰设置

Source

特殊日期 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
在这里插入图片描述