特殊日期 App页面置灰设置

科罗拉多

已于 2022-12-28 17:03:35 修改

阅读量527

点赞数

文章标签：前端 javascript 开发语言

于 2022-12-28 16:59:54 首次发布

本文链接：https://blog.csdn.net/guo_2019/article/details/128470692

版权

特殊日期 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)
        }
      })
    },
}