App.vue 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
  1. <template>
  2. <a-config-provider :locale="locale">
  3. <div id="app">
  4. <div v-if="envtips!=''" class="envtipsBox">{{ envtips }}</div>
  5. <router-view/>
  6. </div>
  7. </a-config-provider>
  8. </template>
  9. <script>
  10. import zhCN from 'ant-design-vue/es/locale/zh_CN';
  11. import { AppDeviceEnquire } from '@/utils/mixin'
  12. import moment from 'moment';//引入moment
  13. import 'moment/locale/zh-cn';
  14. moment.locale('zh-cn'); //设置语言 或 moment.lang('zh-cn');
  15. export default {
  16. mixins: [AppDeviceEnquire],
  17. data () {
  18. return {
  19. locale:zhCN,
  20. envtips: '',
  21. moment
  22. }
  23. },
  24. created () {
  25. this.envtips = process.env.VUE_APP_ENVTIPS
  26. // 在页面加载时读取sessionStorage
  27. if (sessionStorage.getItem('store')) {
  28. const data = JSON.parse(sessionStorage.getItem('store'))
  29. sessionStorage.setItem('Access-Token', data.user.token)
  30. this.$store.replaceState(Object.assign({}, this.$store.state, data))
  31. }
  32. // 在页面刷新时将store保存到sessionStorage里
  33. window.addEventListener('beforeunload', () => {
  34. this.$store.state.app.isNewTab = true
  35. this.$store.state.app.updateList = false
  36. sessionStorage.setItem('store', JSON.stringify(this.$store.state))
  37. })
  38. // 按F5 刷新页面
  39. window.addEventListener('keydown', (e) => {
  40. if (e.keyCode == '116') {
  41. window.location.reload()
  42. }
  43. })
  44. window.addEventListener('visibilitychange',()=>{
  45. this.$store.state.app.visibilityState = document.visibilityState == 'visible'
  46. })
  47. window.addEventListener('focus',(e)=>{
  48. if(!this.$store.state.app.visibilityState){
  49. this.$store.state.app.visibilityState = true
  50. }
  51. })
  52. window.addEventListener('blur',(e)=>{
  53. if(this.$store.state.app.visibilityState){
  54. this.$store.state.app.visibilityState = false
  55. }
  56. })
  57. this.$message.config({
  58. top: `100px`,
  59. duration: 3,
  60. maxCount: 3
  61. })
  62. }
  63. }
  64. </script>
  65. <style>
  66. #app {
  67. height: 100%;
  68. }
  69. .envtipsBox{
  70. position: fixed;
  71. z-index: 100000;
  72. background: red;
  73. text-align: center;
  74. color: #fff;
  75. font-size: 30px;
  76. top: 0;
  77. left: 0;
  78. width: 30%;
  79. margin-left: 20%;
  80. }
  81. </style>