47 lines
1.2 KiB
JavaScript
47 lines
1.2 KiB
JavaScript
import { computed, ref, watch } from 'vue';
|
||
|
||
const cssVar = {
|
||
'--text-xs': '20rpx',
|
||
'--text-sm': '24rpx',
|
||
'--text-base': '28rpx',
|
||
'--text-lg': '32rpx',
|
||
'--text-xl': '36rpx',
|
||
|
||
}
|
||
|
||
const elderCssVar = {
|
||
'--text-xs': '28rpx',
|
||
'--text-sm': '32rpx',
|
||
'--text-base': '42rpx',
|
||
'--text-lg': '48rpx',
|
||
'--text-xl': '52rpx',
|
||
}
|
||
|
||
export default function useElder() {
|
||
const elderMode = ref(String(uni.getStorageSync('elderMode')) === 'true');
|
||
const elderVarStyle = computed(() => getStyleString(elderMode.value ? elderCssVar : cssVar));
|
||
const elderClass = computed(() => elderMode.value ? 'caring-mode-active' : ''); // caring-mode 关爱模式（避免和初版的elder-mode-active类名重复）
|
||
|
||
function getStyleString(cssVarObject) {
|
||
return Object.entries(cssVarObject).map(([key, value]) => `${key}:${value}`).join(';');
|
||
}
|
||
|
||
function toggle() {
|
||
elderMode.value = !elderMode.value;
|
||
}
|
||
|
||
watch(elderMode, (newVal) => {
|
||
uni.setStorageSync('elderMode', newVal);
|
||
const app = getApp();
|
||
if (app && app.globalData) {
|
||
app.globalData.elderMode = elderMode.value;
|
||
}
|
||
}, { immediate: true });
|
||
|
||
return {
|
||
elderMode,
|
||
elderClass,
|
||
elderVarStyle,
|
||
toggle
|
||
};
|
||
}; |