<template>
  <div class="pageBgc" @click="changeBgc" :style="{background:colorIndex}">
      <ul>
          <li>点我切换颜色</li>
      </ul>
  </div>
</template>

<script>
export default {
 
  data() {
    return {
        colorSet : ['gold','skyblue','red'],
        colorIndex:0
    };
  },
 
  methods: {
      changeBgc(){
          let colorRender = Math.floor(Math.random() * this.colorSet.length); //随机数
          this.colorIndex = this.colorSet[colorRender]; //拿到数组里的颜色
          
      }
  },
};
</script>

<style scoped lang="less">
    .pageBgc{
        width: 100%;
        height: 100vh;
        background: skyblue;
    }
</style>

  <div class="btnTitle">
      <div class="btn-bg" :class="{bg:time == 3}" @click="changeBg(3)">15天</div>
      <div class="btn-bg" :class="{bg:time == 4}" @click="changeBg(4)">30天</div>
  </div>
  <div class="btnTitle">
       <div class="btn-bg" :class="{bg:increase == 5}" @click="changeBg(5)">增量</div>
       <div class="btn-bg" :class="{bg:increase == 6}" @click="changeBg(6)">总量</div>
   </div>
   // 在methods方法里面
   data () {
   			time: 3,
      		increase: 5, 
   },
    methods: {
    changeBg (index) {
      if (index === 3 || index === 4) {
        this.time = index
      } else if (index === 5 || index === 6) {
        this.increase = index
      } else {
        this.sort = index
      }
    }
  }
  // css样式
  <style lang="scss">
		.bg {
		      background-color: rgb(12, 197, 89);
		       color: #fff;
	     }
	     .btnTitle {
             display: flex;
             width: 400px;
             border: 1px solid #ccc;
             background-color: #fff;
             margin-left: 10px;
             border-radius: 5px;
             .btn-bg {
                 width: 50%;
                 height: 40px;
                 text-align: center;
                 line-height: 40px;
                 border-radius: 5px;
             }
         }
  </style>

点击前

点击后

就这样简单的切换效果就达到了！！！！

一、背景颜色

1.最终效果：

2.代码：

主要思路就是利用less变量控制主题颜色

  <!-- 先写出来可供选择的主题切换按钮 -->
           <div class="backColor">
            背景颜色：
            <i
              v-for="(item, index) in skinState.data"
              :key="index"
              :class="['color-box', item]"
              @click="skinState.change(item)"
            >
            </i>
          </div>

 //将colorData的数据正好写成三个class名 使用的时候就可以直接item用
    const skinState = reactive({
      data: ['back1', 'back2', 'back3'],
      curSkin: 'back1',
      change: (item: string) => {
        skinState.curSkin = item
      }
    })

 使用的时候就是将对应的背景加上动态的class名

   <div :class="['m-left',  skinState.curSkin]">
          <!-- 通过改变class名来对应切换背景颜色 -->
          <div class="m-head">
           
          </div>
          <ul class="m-card" >
           
          </ul>
          
          </div>

 css:  (这里只写了m-card  如果想让比如说上面的m-head也随着

<style scoped lang="less">
@BackColor1: #ffffff;
@BackColor2: #fffbf3;
@BackColor3: #fcfffa;
@cardColor1: #f7f8fa;
@cardColor2: #fff6e4;
@cardColor3: #f1f8ec;
.back1 {
  background: @BackColor1;
  .m-card {
    background: @cardColor1;
  }
}
.back2 {
  background: @BackColor2;
  .m-card {
    background: @cardColor2;
  }
}
.back3 {
  background: @BackColor3;
  .m-card {
    background: @cardColor3;
  }
}
</style>

还有很多可以完善的地方 比如说封装成一个组件什么的  目前只是一个简单的粗糙的写法

二、字体大小

1.最终效果：

script：

   const fontSizeRef = ref()//方法使用于哪些文字 就在哪个div里加上一个这样的ref
   const fontSizeState = reactive({
      curSize: 16, //字体大小介于16-24之间 默认为16
      //当超过24或者小于24  出现警告并停止调用
      sizeChange: (type: string) => {
        if (type === 'smaller' && fontSizeState.curSize < 18) {
          alert('已经缩小到最小')
          return
        }
        if (type === 'bigger' && fontSizeState.curSize > 22) {
          alert('已经放大到最大')
          return
        }
        fontSizeState.curSize =
          type === 'smaller'
            ? fontSizeState.curSize - 2
            : fontSizeState.curSize + 2
        fontSizeRef.value.style.fontSize = String(fontSizeState.curSize + 'px')
      }
    })

html使用：

  <!-- 改变字体大小 -->
          <div class="fontSizeChange">
            <i @click="fontSizeState.sizeChange('smaller')"></i>
            <i @click="fontSizeState.sizeChange('bigger')"></i>
          </div>

  <!-- 适用文字范围 -->
          <div class="m-lawContent" ref="fontSizeRef">
          </div>