nuxt项目置灰功能

魏晚

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

阅读量212

点赞数

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

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

本文链接：https://blog.youkuaiyun.com/TragueZw/article/details/128844013

版权

nuxt2 专栏收录该内容

1 篇文章

订阅专栏

文章讲述了在Nuxt.js应用中，从后台获取配置并在`store/index.js`中初始化，然后在`layouts/default.vue`根据配置动态设置HTML类，以应用滤镜效果。然而，当滤镜应用于body时，可能会影响到fixed定位元素的行为，导致fixed失效。作者引用了一篇关于filter与fixed冲突的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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冲突的原因及解决方案_小毛嗑儿的博客-优快云博客

<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>