nuxt项目置灰功能

魏晚

已于 2023-02-02 09:09:50 修改

阅读量157

点赞数

分类专栏： nuxt2 文章标签： vue.js

于 2023-02-02 09:03:26 首次发布

本文链接：https://blog.csdn.net/TragueZw/article/details/128844013

版权

nuxt2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1. store/index.js中获取后台配置

export const actions = {
  async nuxtServerInit({ commit }, { $api }) {
    const config = $api.web.getConfig()
    commit('setConfig', config)
  },
}

2. layouts/default.vue中根据配置设置html的class

这里能将filter样式加在body上，会导致fixed失效，参考：详解filter与fixed冲突的原因及解决方案_小毛嗑儿的博客-CSDN博客

<template>
  <Nuxt></Nuxt>
</template>
<script>
export default {
  head() {
    return {
      htmlAttrs: {
        class: this.$store.state.config.gray ? 'html-gray' : '',
      },
    }
  },
}
</script>
<style>
.html-gray {
  filter: grayscale(100%);
}
</style>