亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

1、前端獨(dú)立實(shí)現(xiàn)

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

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

2、通過后臺管理控制設(shè)置網(wǎng)站的整體置灰樣式

1、先給public文件夾下的index.html文件的html標(biāo)簽添加一個(gè)ID；

<html id="html_box">

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

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

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

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

queryGary().then((res) => { // 調(diào)用接口獲取狀態(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標(biāo)簽這個(gè)元素，來設(shè)置具體是正常狀態(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標(biāo)簽這個(gè)元素
          html_box.style.filter = 'grayscale(100%)' // 設(shè)置網(wǎng)站整體置灰
        }
        if (res.data.changeGray === 0) {
          let html_box = document.getElementById('html_box')
          html_box.style.filter = 'grayscale(0)'
        }
      }
    })

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

相關(guān)文章

最新評論