vue3 按钮切换页面背景颜色以及字体大小

一、背景颜色

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>