vue项目网站全局置灰功能实现示例详解

目录
  • 1、前端独立实现
  • 2、通过后台管理控制设置网站的整体置灰样式

1、前端独立实现

两种不同的逻辑，一种是前端自己实现，一种是结合后台管理系统来控制，网站是正常还是置灰。

直接在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文件中通过接口调用到目前后台管理系统所设置的具体是正常状态还是置灰状态，网站来做出相应设置；

（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项目网站全局置灰功能实现示例详解的详细内容，更多关于vue网站全局置灰的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 基于Vue3+TypeScript的全局对象的注入和使用详解

    基于Vue3+TypeScript的全局对象的注入和使用详解

    目录 1.Vue2的全局挂载 2.Vue3+TypeScript的全局挂载 3.Vue3+TypeScript的全局挂载的对象接口定义 刚完成一些前端项目的开发,腾出精力来总结一些前端开发的技术点,以及继续完善基于SqlSugar的开发框架循序渐进介绍的系列文章,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用.我们知道在Vue2中全局注入一个全局变量使用protoType的方式,很方便的就注入了,而Vue3则不能通过这种方式直接使用,而是显得复杂一些,不过全局变量的

  • vue3+vite中开发环境与生产环境全局变量配置指南

    vue3+vite中开发环境与生产环境全局变量配置指南

    目录 一.开发环境和生产环境 二.配置环境变量 三.使用全局变量 总结 一.开发环境和生产环境 开发环境:也就是编码时运行的环境,即我们使用npm run dev或者npm run serve运行项目到本地时,项目处于的环境. 生产环境:项目部署到服务器上后处于的环境,我们使用npm run build将项目打包以后,再运行项目,项目就运行在生产环境中了. 对于不同的环境,我们可以配置不同的环境变量,来实现开发和生产的兼容. 例如: 开发环境时,我们可以请求自己本地的接口(‘/api’ prox

  • vue 按需引入vant跟全局引入方式

    目录 一.按需引入 1.下载插件 2.自动按需引入组件 (推荐) 3.创建src文件跟js 4.全局main.js导入 5.使用 二.全局导入 一.按需引入 1.下载插件 第一步我们可以先打开vant的官网:vant 然后下载vant 用命令行下载 : 根据所需去配置 : 我配置的是vant2 Vue 2 项目,安装 Vant 2: npm i vant -S Vue 3 项目,安装 Vant 3: npm i vant@next -S 下载好以后我们去vue里面的根目 package.json

  • Vue中的全局指令防止按钮重复点击

    目录 全局指令防止按钮重复点击 1.common.js 2.在需要引入的页面引入(**.vue) 防重复点击(vue指令实现) 阻止快速点击按钮会重复多次调用接口的 全局指令防止按钮重复点击 1.common.js 首先引入Vue import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', {   inserted: function (el, binding) {     el.addEventLi

  • vue全局数据管理示例详解

    目录 记账页面标签页面新增 将API封装到window 用computed计算属性 记账页面标签页面新增 记账页面和标签页面都可以新增标签.可是现在有一个bug.在标签页面新增标签之后,在记账页面不会自动同步,要刷新一下才能同步. 这是因为这两个页面的数据tagList都是分别从tagListModel里fetch的.所以就导致了数据不同步. 解决方案:在更高一层的地方统一去tagListModel里fetch一次,把取出来的设成一个全局的属性,然后分别在两个页面直接使用. 我们选择在main.

  • Vue3全局挂载使用Axios学习实战

    Vue3全局挂载使用Axios学习实战

    目录 引言 一.全局挂载 二.全局使用 引言 在vue2中会习惯性的把axios挂载到全局,以方便在各个组件或页面中使用this.$http请求接口.但是在vue3中取消了Vue.prototype,在全局挂载方法和属性时,需要使用官方提供的globalPropertiesAPI. 一.全局挂载 在vue2项目中,入口文件main.js配置Vue.prototype挂载全局方法对象: import Vue from 'vue' import router from '@/router' impo

  • vue项目网站全局置灰功能实现示例详解

    目录 1.前端独立实现 2.通过后台管理控制设置网站的整体置灰样式 1.前端独立实现 两种不同的逻辑,一种是前端自己实现,一种是结合后台管理系统来控制,网站是正常还是置灰. 直接在public文件夹下的index.html文件的html标签里加上style="filter:grayscale(100%)",总的就是<html style="filter:grayscale(100%)"> 2.通过后台管理控制设置网站的整体置灰样式 1.先给public文

  • Vue中设置登录验证拦截功能的思路详解

    目录 一.解决思路 二.让浏览器存储服务器返回的token 三.在请求中设置访问权限 四.封装登录验证 Hello,你好呀,我是灰小猿,一个超会写bug的程序猿! 今天在做vue和springboot交互的一个项目的时候,想要基于前端实现一些只有登录验证之后才能访问某些页面的操作,所以在这里总结一下实现该功能的一个解决方案, 首先说一下我是如何判断是否已经登录的, 一.解决思路 由于在我的springboot后台采用的shiro+Jwt安全框架,所以会在登录之后反馈给前端一个token,并且前端

  • Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器的实例详解

    Vue项目webpack打包部署到服务器 这篇博文主要说的就是我今天遇到的问题,而且在经过我的询问,好多人在打包部署的时候都遇到了一些问题,下面就来说下,如何将Vue项目放置在服务器上,这里以Tomcat为例. 必须要配置的就是/config/index.js 在vue-cli webpack的模板下的/config/index.js,我们可以看到assetsPublicPath这个键,并且这个东西还出现了两次,我第一次打包的时候,只是修改了最下面的assetsPublicPath,将它从'/'

  • Vue实现高德坐标转GPS坐标功能的示例详解

    Vue实现高德坐标转GPS坐标功能的示例详解

    首先介绍一下常见的几种地图的坐标类型: WGS-84:这是一个国际标准,也就是GPS坐标(Google Earth.或者GPS模块采集的都是这个类型). GCJ-02:中国坐标偏移标准,像是Google Map.高德.腾讯地图都是采用这种坐标展示. BD-09:百度坐标偏移标准,百度地图专用的便宜标准. 所以说这篇博文主要是实现GCJ-02坐标转换成WGS-84坐标. 什么时候会用到需要解决坐标转换的问题呢?起因是一个demo,它使用GPS模块采集经纬度数据,然后使用高德地图进行转换,是的,高德

  • Vue项目的网络请求代理到封装步骤详解

    目录 1.创建vue项目 2.安装axios 3.进行config.js配置 4.main.js里引入 5.src目录下新建Utils文件夹,在内封装request.js 6.以login路由为示例 src文件下新建api文件,在api内新建login.js 7.在页面内引入方法,并使用 1.创建vue项目 vue create demo demo是项目名称 2.安装axios 进入demo里面打开终端(黑窗口),执行 npm install axios 3.进行config.js配置 devS

  • vue实例成员 插值表达式 过滤器基础教程示例详解

    vue实例成员 插值表达式 过滤器基础教程示例详解

    目录 一. 什么是Vue 二.为什么学Vue 三.如何使用Vue 下载安装? 插值表达式 四.vue特点 1.虚拟DOM 2.数据的双向绑定 3.单页面应用 4.数据驱动 五.Vue实例 六.实例成员 - 挂载点 | el - 自定义插值表达式括号| delimiters - 数据 | data - 过滤器 | filters - 方法 | methods - js对象(即字典)补充 - 插值表达式转义 | delimters - 计算属性 | computed - 监听属性 | watch 一

  • 比ant更丰富Modal组件功能实现示例详解

    目录 有哪些比ant更丰富的功能 render部分 渲染黑色蒙层 渲染弹框主体 设置body overflow:hiiden 有哪些比ant更丰富的功能 普通的modal组件如下: 我们写的modal额外支持,后面没有蒙版,并且Modal框能够拖拽 还支持渲染在文档流里,上面的都是fixed布局,我们这个正常渲染到文档下面: render部分 <RenderDialog {...restState} visible={visible} prefixCls={prefixCls} header={

  • React项目使用ES6解决方案及JSX使用示例详解

    目录 不使用 ES6 绑定 JSX如何? 不使用 ES6 然而,在纯浏览器端使用ES6语法时,浏览器支持存在差异,这需要特殊处理才能正常运行. 支持ES2015桌面浏览器 Chrome:从51版开始,它可以支持ES6 97%的新功能. Firefox:53版本支持97%的ES6新功能. Safari:从版本10开始,ES6 99%的新功能都可以得到支持. IE:Edge 15可以支持96%的ES6新功能. Edge 14可以支持93%的新ES6功能.(IE7~11基本不支持ES6) class

  • Swift中的高阶函数功能作用示例详解

    目录 高阶函数的作用 1. 简化代码 2. 提高可读性 3. 支持函数式编程 4. 提高代码的可重用性 常见的高阶函数 1. map() 2. filter() 3. reduce() 4. sorted() 5. forEach() 6. compactMap() 7. flatMap() 8. zip() 9. first() 10. contains() 高阶函数的作用 Swift中的高阶函数是指那些参数或返回值是函数的函数.它们的存在使得我们可以用非常简洁和优雅的代码来解决许多问题. 1

  • Java实现图片裁剪功能的示例详解

    Java实现图片裁剪功能的示例详解

    目录 前言 Maven依赖 代码 验证一下 前言 本文提供将图片按照自定义尺寸进行裁剪的Java工具类,一如既往的实用主义. Maven依赖 <dependency> <groupId>com.google.guava</groupId> <artifactId>guava</artifactId> <version>30.1.1-jre</version> </dependency> <dependen

随机推荐