欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue項目網站全局置灰功能實現(xiàn)示例詳解

 更新時間：2022年12月21日 09:39:35   作者：coderSlow  
這篇文章主要為大家介紹了vue項目網站全局置灰功能實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

1、前端獨立實現(xiàn)

兩種不同的邏輯，一種是前端自己實現(xiàn)，一種是結合后臺管理系統(tǒng)來控制，網站是正常還是置灰。

直接在public文件夾下的index.html文件的html標簽里加上style="filter:grayscale(100%)"，總的就是<html style="filter:grayscale(100%)">

2、通過后臺管理控制設置網站的整體置灰樣式

1、先給public文件夾下的index.html文件的html標簽添加一個ID；

<html id="html_box">

2、在APP.vue文件中通過接口調用到目前后臺管理系統(tǒng)所設置的具體是正常狀態(tài)還是置灰狀態(tài)，網站來做出相應設置；

（1）、在APP.vue文件中引入獲取狀態(tài)的接口；

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

（2）、在mounted鉤子函數(shù)中調用接口獲取狀態(tài)；

queryGary().then((res) => { // 調用接口獲取狀態(tài)
      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標簽這個元素，來設置具體是正常狀態(tài)還是置灰狀態(tài)；

注意：狀態(tài)為“1”代表置灰，狀態(tài)為“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)'
        }
      }
    })

以上就是vue項目網站全局置灰功能實現(xiàn)示例詳解的詳細內容，更多關于vue網站全局置灰的資料請關注腳本之家其它相關文章！

相關文章

最新評論