vue3 按钮切换页面背景颜色以及字体大小
一、背景颜色1.最终效果:2.代码:二、字体大小1.最终效果:
·
一、背景颜色
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>
更多推荐
已为社区贡献1条内容
所有评论(0)