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
|
|||
|
|
};
|
|||
|
|
};
|