vue下网站变灰

非IE浏览器处理

非IE浏览器下只需要添加滤镜，对整个页面过滤就可以了，样式代码如下：

//悼念色
.body {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  //-ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);
}

IE浏览器处理

因为ie部分浏览器不支持滤镜功能，所以使用js遍历所有组件进行样式渲染。操作如下：

• 引入grayscale.js

  将grayscale.js放入项目中，然后引入：

  const grayscale = require('../../assets/theme/grayscale')
  

• grayscale.js添加导出变量

  vue中使用的是ES6的写法，所以在grayscale.js
  中要添加组件导出（复制到最下面即可），代码如下：

  var grayscale = (function(){
      ......
  })();
  //上面为原声引入的js，此处添加导出
  module.exports = grayscale
  

• 调用js
  在适当位置调用js方法，加载样式：

  grayscale(document.body)
  

  如果需要重置样式，可以调用重置的方法：

  grayscale.reset(document.body);
  

注意⚠️：

调用js时候一定要注意加载顺序问题，
先加载页面，然后才能调用js方法。可以通过同步方法调用或者定时器延迟加载来处理。