Detailed explanation of the global graying function implementation example of vue project website

1. Front-end independent implementation

There are two different logics, one is to implement the front-end itself, and the other is to control it in combination with the back-end management system. Is the website normal or dust-sized?

Add it directly to the html tag of the file in the public folderstyle="filter:grayscale(100%)", in general<html style="filter:grayscale(100%)">

2. Set up the overall graying style of the website through backend management control

1. First add an ID to the html tag of the file under the public folder;

<html >

2. The website will make corresponding settings by calling the specific normal state or graying state set by the current backend management system through the interface in the file;

(1) Introduce an interface to obtain state in the file;

import { queryGary } from '@/api/'

(2) Call the interface in the mounted hook function to obtain the state;

queryGary().then((res) =&gt; { // Call the interface to get the status      if () {
        if ( === 1) {
          let html_box = ('html_box')
          html_box. = 'grayscale(100%)'
        }
        if ( === 0) {
          let html_box = ('html_box')
          html_box. = 'grayscale(0)'
        }
      }
    })

3. Get the html tag element through ID to set whether it is a normal state or a grayed-out state;

Note: The status of "1" means graying, and the status of "0" means normal

queryGary().then((res) =&gt; {
      if () {
        if ( === 1) {
          let html_box = ('html_box') // Get the html tag element through ID          html_box. = 'grayscale(100%)' // Set up the overall graying of the website        }
        if ( === 0) {
          let html_box = ('html_box')
          html_box. = 'grayscale(0)'
        }
      }
    })

The above is the detailed explanation of the global graying function implementation example of the vue project website. For more information about global graying on vue website, please pay attention to my other related articles!