vue首页样式变灰色修改

最新推荐文章于 2022-12-09 15:48:22 发布

原创最新推荐文章于 2022-12-09 15:48:22 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了一种在Vue应用中根据当前路由自动调整页面样式的实现方法。具体来说，当用户导航到主页时，通过监听$route的变化来为html元素添加灰度滤镜效果；离开主页时，则移除该效果，恢复正常色彩显示。

  watch: {
       '$route': {
        handler: function(val) {
        const htmlDom = document.getElementsByTagName("html")
        if (val.name==='Home') {
          htmlDom[0].setAttribute("class", "gray")
        } else {
          htmlDom[0].setAttribute("class", "")
        }
      },
      immediate: true
    },
  },

App.vue写样式

html.gray{
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}