# 清明节灰色页面实现方案

# 页面灰色有多种实现方案,这里只讲一种比较简单的方案。

# page.vue 页面代码如下

<template>
  <view class="app" :class="classCom">
    <!-- 页面内容开始 -->
		
    这里是页面内容。。。
		
    <!-- 页面内容结束 -->
  </view>
</template>

<script>
  export default {
    data() {
      // 页面数据变量
      return {
				
      }
    },
    // 计算属性
    computed:{
      classCom(){
        let classStr = "";
        if(this.vk.pubfn.timeUtil.isQingming()){
          classStr = "gray-view";
        }
        return classStr;
      }		
    }
  }
</script>
<style lang="scss" scoped>
  .gray-view{
    filter: grayscale(100%);
  }		
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 此方案优点:简单

# 此方案缺点:每个页面都要加上 :class="classCom" ,但一般就首页和个别页面需要灰色,故此方案还是可行的。

# 如你有更好的方案,欢迎来群内讨论。Q群:22466457