vue项目网站全局置灰功能实现示例详解

这篇文章主要为大家介绍了vue项目网站全局置灰功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助!

1、前端独立实现

两种不同的逻辑，一种是前端自己实现，一种是结合后台管理系统来控制，网站是正常还是置灰。

直接在public文件夹下的index.html文件的html标签里加上style="filter:grayscale(100%)"，总的就是<htmlstyle="filter:grayscale(100%)">

2、通过后台管理控制设置网站的整体置灰样式

1、先给public文件夹下的index.html文件的html标签添加一个ID；

<htmlid="html_box">

2、在APP.vue文件中通过接口调用到目前后台管理系统所设置的具体是正常状态还是置灰状态，网站来做出相应设置；

（1）、在APP.vue文件中引入获取状态的接口；

import{queryGary}from'@/api/index.js'

（2）、在mounted钩子函数中调用接口获取状态；

queryGary().then((res) => { // 调用接口获取状态
      if (res.success) {
        if (res.data.changeGray === 1) {
          let html_box = document.getElementById('html_box')
          html_box.style.filter = 'grayscale(100%)'
        }
        if (res.data.changeGray === 0) {
          let html_box = document.getElementById('html_box')
          html_box.style.filter = 'grayscale(0)'
        }
      }
    })

3、通过ID获取到html标签这个元素，来设置具体是正常状态还是置灰状态；

注意：状态为“1”代表置灰，状态为“0”代表正常

queryGary().then((res) => {
      if (res.success) {
        if (res.data.changeGray === 1) {
          let html_box = document.getElementById('html_box') // 通过ID获取到html标签这个元素
          html_box.style.filter = 'grayscale(100%)' // 设置网站整体置灰
        }
        if (res.data.changeGray === 0) {
          let html_box = document.getElementById('html_box')
          html_box.style.filter = 'grayscale(0)'
        }
      }
    })