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>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:数字20 设计师:CSDN官方博客 返回首页
评论 2

打赏作者

SonderJie

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值