95 lines
2.4 KiB
JavaScript
95 lines
2.4 KiB
JavaScript
// mixins/themeMixin.js（Vue3 适配版）
|
||
import {
|
||
getThemeConfigFromStorage,
|
||
THEME_CHANGE_EVENT,
|
||
THEME_PRESETS,
|
||
DEFAULT_THEME_KEY
|
||
} from '../utils/theme.js' // 注意路径：Vue3 中 @ 别名需确认，这里先用相对路径
|
||
|
||
export default {
|
||
// Vue3 中 data 需为函数（和Vue2一致，无需改）
|
||
data() {
|
||
return {
|
||
themeConfig: getThemeConfigFromStorage()
|
||
}
|
||
},
|
||
|
||
// Vue3 计算属性写法不变
|
||
computed: {
|
||
pageThemeStyle() {
|
||
return {
|
||
backgroundColor: this.themeConfig.bgColor,
|
||
color: this.themeConfig.textPrimary,
|
||
minHeight: '100vh'
|
||
}
|
||
},
|
||
cardThemeStyle() {
|
||
return {
|
||
backgroundColor: this.themeConfig.cardBgColor,
|
||
borderColor: this.themeConfig.borderColor,
|
||
boxShadow: `0 6rpx 20rpx ${this.themeConfig.shadowColor}`,
|
||
borderRadius: '28rpx'
|
||
}
|
||
},
|
||
btnPrimaryStyle() {
|
||
return {
|
||
backgroundColor: this.themeConfig.primaryColor,
|
||
color: '#ffffff',
|
||
border: 'none',
|
||
borderRadius: '14rpx'
|
||
}
|
||
}
|
||
},
|
||
|
||
// ==================== 关键：Vue3 生命周期适配 ====================
|
||
// 小程序中 Vue3 仍支持 onLoad/onShow/onUnload 等原生生命周期
|
||
onLoad() {
|
||
this.syncThemeConfig()
|
||
this.watchThemeChange()
|
||
},
|
||
|
||
onShow() {
|
||
this.syncThemeConfig()
|
||
},
|
||
|
||
onUnload() {
|
||
// 移除监听，避免内存泄漏
|
||
uni.$off(THEME_CHANGE_EVENT, this.themeChangeHandler)
|
||
},
|
||
|
||
// 方法部分（和Vue2逻辑一致，无需改）
|
||
methods: {
|
||
/**
|
||
* 同步最新主题配置（优先级：全局 > 本地 > 默认）
|
||
*/
|
||
syncThemeConfig() {
|
||
const appInstance = getApp({ allowDefault: true })
|
||
const globalTheme = appInstance?.globalData?.themeConfig
|
||
|
||
this.themeConfig = globalTheme
|
||
|| getThemeConfigFromStorage()
|
||
|| THEME_PRESETS[DEFAULT_THEME_KEY]
|
||
},
|
||
|
||
/**
|
||
* 监听全局主题变更事件
|
||
*/
|
||
watchThemeChange() {
|
||
this.themeChangeHandler = ({ key, config }) => {
|
||
if (key && config) {
|
||
this.themeConfig = config
|
||
// 可选：页面自定义主题更新逻辑
|
||
this.onThemeUpdated && this.onThemeUpdated()
|
||
}
|
||
}
|
||
uni.$on(THEME_CHANGE_EVENT, this.themeChangeHandler)
|
||
},
|
||
|
||
/**
|
||
* 【可选】页面自定义主题更新逻辑（供页面重写）
|
||
*/
|
||
onThemeUpdated() {
|
||
// 空实现
|
||
}
|
||
}
|
||
} |