vue項(xiàng)目網(wǎng)站全局置灰功能實(shí)現(xià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)文章
這篇文章主要給大家介紹了關(guān)于vue中正確使用jsx的相關(guān)資料,JSX就是Javascript和XML結(jié)合的一種格式,React發(fā)明了JSX,利用HTML語法來創(chuàng)建虛擬DOM,當(dāng)遇到<,JSX就當(dāng)HTML解析,遇到{就當(dāng)JavaScript解析,需要的朋友可以參考下2021-07-07
vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
antd form表單使用setFildesValue 賦值失效的解決
這篇文章主要介紹了antd form表單使用setFildesValue 賦值失效的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。2023-04-04
vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細(xì)教程
富文本編輯器在任何項(xiàng)目中都會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue.js?中組件間通信的方法有很多種,這篇文章主要為大家詳細(xì)介紹了6種常見的直接或間接的組件傳值方式,有需要的小伙伴可以參考一下2024-01-01
這篇文章主要給大家介紹了關(guān)于Vue腳手架創(chuàng)建的相關(guān)資料,Vue腳手架是vue官方提供的標(biāo)準(zhǔn)化開發(fā)工具(平臺),文中通過代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue開發(fā)中后臺系統(tǒng)復(fù)雜表單優(yōu)化技巧
這篇文章主要為大家介紹了vue開發(fā)中后臺系統(tǒng)復(fù)雜表單的優(yōu)化技巧，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了vue activated在子組件中的使用，文章圍繞vue activated的xingu你資料講解展開內(nèi)容并附上具體代碼,需要的朋友可以參考一下2021-11-11
快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語法無效的問題
今天小編就為大家分享一篇快速解決vue動(dòng)態(tài)綁定多個(gè)class的官方實(shí)例語法無效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue.extend與vue.component的區(qū)別和聯(lián)系
這篇文章主要介紹了vue.extend與vue.component的區(qū)別和聯(lián)系，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09