96 lines
3.4 KiB
Vue
96 lines
3.4 KiB
Vue
<template>
|
|
<a-config-provider :locale="locale" :get-popup-container="popContainer">
|
|
<router-view/>
|
|
</a-config-provider>
|
|
</template>
|
|
|
|
<script>
|
|
import {enquireScreen} from './utils/util'
|
|
import {mapState, mapMutations} from 'vuex'
|
|
import themeUtil from '@/utils/themeUtil';
|
|
import {getI18nKey} from '@/utils/routerUtil'
|
|
|
|
export default {
|
|
name: 'App',
|
|
data() {
|
|
return {
|
|
locale: {}
|
|
}
|
|
},
|
|
|
|
created () {
|
|
this.setLanguage(this.lang) // 设置语言
|
|
enquireScreen(isMobile => this.setDevice(isMobile)) // 监听屏幕变化 设置设备类型
|
|
},
|
|
mounted() {
|
|
this.setWeekModeTheme(this.weekMode) // 设置主题
|
|
},
|
|
watch: {
|
|
weekMode(val) { // 监听色弱模式变化
|
|
this.setWeekModeTheme(val) // 设置色弱模式主题
|
|
},
|
|
lang(val) { // 监听语言变化
|
|
this.setLanguage(val) // 设置语言
|
|
this.setHtmlTitle() // 设置html标题
|
|
},
|
|
$route() { // 监听路由变化
|
|
this.setHtmlTitle() // 设置html标题
|
|
},
|
|
'theme.mode': function(val) { // 监听主题变化
|
|
let closeMessage = this.$message.loading(`您选择了主题模式 ${val}, 正在切换...`) // 显示切换主题提示
|
|
themeUtil.changeThemeColor(this.theme.color, val).then(closeMessage) // 切换主题
|
|
},
|
|
'theme.color': function(val) { // 监听主题颜色变化
|
|
let closeMessage = this.$message.loading(`您选择了主题色 ${val}, 正在切换...`) // 显示切换主题提示
|
|
themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage) // 切换主题
|
|
},
|
|
'layout': function() { // 监听布局变化
|
|
window.dispatchEvent(new Event('resize')) // 触发resize事件
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState('setting', ['layout', 'theme', 'weekMode', 'lang']),
|
|
},
|
|
methods: {
|
|
...mapMutations('setting', ['setDevice']),
|
|
...mapState('account', ['project']) ,
|
|
setWeekModeTheme(weekMode) { // 设置色弱模式主题
|
|
if (weekMode) { // 如果是色弱模式
|
|
document.body.classList.add('week-mode') // 添加色弱模式样式
|
|
} else {
|
|
document.body.classList.remove('week-mode') // 移除色弱模式样式
|
|
}
|
|
},
|
|
setLanguage(lang) { // 设置语言
|
|
this.$i18n.locale = lang
|
|
switch (lang) {
|
|
case 'CN': // 中文
|
|
this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default
|
|
break
|
|
case 'HK': // 繁体
|
|
this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
|
|
break
|
|
case 'US':
|
|
default: // 英文
|
|
this.locale = require('ant-design-vue/es/locale-provider/en_US').default
|
|
break
|
|
}
|
|
},
|
|
setHtmlTitle() { // 设置html标题
|
|
const project = JSON.parse(localStorage.getItem(process.env.VUE_APP_PROJECT_KEY))
|
|
const route = this.$route // 获取当前路由
|
|
const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path) // 获取当前路由的i18n keywords 如果是首页则设置为home.name 否则获取当前路由的i18n keywords
|
|
document.title = project.project_name + ' | ' + this.$t(key) // 设置html标题 process.env.VUE_APP_NAME 为项目名称 this.$t(key) 为当前路由的i18n keywords
|
|
},
|
|
popContainer() { // 弹出层容器
|
|
return document.getElementById("popContainer") // 返回弹出层容器
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
#id{
|
|
}
|
|
</style>
|