| | |
| | | <template> |
| | | <a-config-provider :locale="locale"> |
| | | <a-config-provider :locale="locale" :get-popup-container="popContainer"> |
| | | <router-view/> |
| | | </a-config-provider> |
| | | </template> |
| | | |
| | | <script> |
| | | import enquireScreen from './utils/device' |
| | | import {mapState} from 'vuex' |
| | | import {enquireScreen} from './utils/util' |
| | | import {mapState, mapMutations} from 'vuex' |
| | | import themeUtil from '@/utils/themeUtil'; |
| | | import {getI18nKey} from '@/utils/routerUtil' |
| | | |
| | | export default { |
| | | name: 'App', |
| | |
| | | } |
| | | }, |
| | | created () { |
| | | let _this = this |
| | | this.setHtmlTitle() |
| | | this.setLanguage(this.lang) |
| | | enquireScreen(isMobile => { |
| | | _this.$store.commit('setting/setDevice', isMobile) |
| | | }) |
| | | enquireScreen(isMobile => this.setDevice(isMobile)) |
| | | }, |
| | | mounted() { |
| | | this.setWeekModeTheme(this.weekMode) |
| | |
| | | }, |
| | | lang(val) { |
| | | this.setLanguage(val) |
| | | this.setHtmlTitle() |
| | | }, |
| | | themeColor(val) { |
| | | $route() { |
| | | this.setHtmlTitle() |
| | | }, |
| | | '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).then(() => { |
| | | setTimeout(closeMessage, 1000) |
| | | }) |
| | | themeUtil.changeThemeColor(val, this.theme.mode).then(closeMessage) |
| | | }, |
| | | 'layout': function() { |
| | | window.dispatchEvent(new Event('resize')) |
| | | } |
| | | }, |
| | | computed: { |
| | | ...mapState('setting', ['theme', 'themeColor', 'weekMode', 'lang']) |
| | | ...mapState('setting', ['layout', 'theme', 'weekMode', 'lang']) |
| | | }, |
| | | methods: { |
| | | ...mapMutations('setting', ['setDevice']), |
| | | setWeekModeTheme(weekMode) { |
| | | if (weekMode) { |
| | | document.body.classList.add('week-mode') |
| | |
| | | this.locale = require('ant-design-vue/es/locale-provider/en_US').default |
| | | break |
| | | } |
| | | }, |
| | | setHtmlTitle() { |
| | | const route = this.$route |
| | | const key = route.path === '/' ? 'home.name' : getI18nKey(route.matched[route.matched.length - 1].path) |
| | | document.title = process.env.VUE_APP_NAME + ' | ' + this.$t(key) |
| | | }, |
| | | popContainer() { |
| | | return document.getElementById("popContainer") |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="less" scoped> |
| | | #id{ |
| | | } |
| | | </style> |