当前位置：首页 > news >正文

使用vuex动态设置全局字号

news 2024/11/8 12:18:33

1.安装vuex

npm install vuex@next --save

2.编写字号设置样式

// 定义字号变量
:root {--font-size: 18px;--font-size-step1: 16px;--font-size-step2: 14px;--font-size-step3: 12px;
}
// 定义样式（全局样式文件）
body, page {font-size: var(--font-size);
}
.f-step1 {font-size: var(--font-size-step1);
}
.f-step2 {font-size: var(--font-size-step2);
}
.f-step3 {font-size: var(--font-size-step3);
}

3.编写动态改变CSS变量的js函数

export function updateCSSVariable(variable, value) {document.documentElement.style.setProperty(variable, value)
}

4.编写vuex状态管理js文件

import { createStore } from 'vuex'
import { updateCSSVariable } from './utils/cssChange.js'

const store = createStore({state() {return {fontSize: 18}},actions: {// 调用mutationssetFontSizeAction(context, newSize) {context.commit('setFontSize', newSize)}},mutations: {// 修改状态setFontSize(state, newSize) {if(newSize < 10) {newSize = 10}if(newSize > 32) {newSize = 32}state.fontSize = newSize;updateCSSVariable('--font-size', newSize + 'px');updateCSSVariable('--font-size-step1', (newSize - 2) + 'px');updateCSSVariable('--font-size-step2', (newSize - 4) + 'px');updateCSSVariable('--font-size-step3', (newSize - 6) + 'px');}}
})

export default store;

5.main.js全局引入注册store(Vue3)

import store from './store/index.js'
import { createSSRApp } from 'vue'
export function createApp() {const app = createSSRApp(App)app.config.globalProperties.$store = storeapp.use(store)return {app}
}

6.vue文件动态调整字号

<template><view class="center-ver"><image @click="subFontSize" src="/static/icons/sub.png" class="iconImage-20"></image><view class="m-l-r-10">{{fontSize}} px</view><image @click="addFontSzie" src="/static/icons/add.png" class="iconImage-20"></image></view>
</template>

<script>
import { computed } from 'vue'

export default {data() {const fontSize = computed(() => this.$store.state.fontSize);return {fontSize,}}，methods: {addFontSzie() {this.$store.dispatch('setFontSizeAction', this.fontSize + 2)},subFontSize() {this.$store.dispatch('setFontSizeAction', this.fontSize - 2)}}
}
</script>