溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“vue網站全局置灰功能如何實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
兩種不同的邏輯，一種是前端自己實現，一種是結合后臺管理系統來控制，網站是正常還是置灰。
直接在public文件夾下的index.html文件的html標簽里加上style="filter:grayscale(100%)"，總的就是<html style="filter:grayscale(100%)">
1、先給public文件夾下的index.html文件的html標簽添加一個ID；
<html id="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)'
}
}
})“vue網站全局置灰功能如何實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
