split mobile mixin from socket mixin

This commit is contained in:
LouisLam 2021-08-10 15:02:46 +08:00
parent d1d000bd74
commit 9ba1743900
4 changed files with 47 additions and 13 deletions

View file

@ -1,5 +1,5 @@
<template> <template>
<div :class="$root.theme"> <div :class="classes">
<div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection"> <div v-if="! $root.socket.connected && ! $root.socket.firstConnect" class="lost-connection">
<div class="container-fluid"> <div class="container-fluid">
{{ $root.connectionErrorMsg }} {{ $root.connectionErrorMsg }}
@ -79,29 +79,45 @@
import Login from "../components/Login.vue"; import Login from "../components/Login.vue";
export default { export default {
components: { components: {
Login, Login,
}, },
data() { data() {
return {} return {}
}, },
computed: {},
computed: {
// Theme or Mobile
classes() {
const classes = {};
classes[this.$root.theme] = true;
classes["mobile"] = this.$root.isMobile;
return classes;
}
},
watch: { watch: {
$route (to, from) { $route (to, from) {
this.init(); this.init();
}, },
}, },
mounted() { mounted() {
this.init(); this.init();
}, },
methods: { methods: {
init() { init() {
if (this.$route.name === "root") { if (this.$route.name === "root") {
this.$router.push("/dashboard") this.$router.push("/dashboard")
} }
}, },
}, },
} }
</script> </script>

View file

@ -10,6 +10,7 @@ import EmptyLayout from "./layouts/EmptyLayout.vue";
import Layout from "./layouts/Layout.vue"; import Layout from "./layouts/Layout.vue";
import socket from "./mixins/socket"; import socket from "./mixins/socket";
import theme from "./mixins/theme"; import theme from "./mixins/theme";
import mobile from "./mixins/mobile";
import Dashboard from "./pages/Dashboard.vue"; import Dashboard from "./pages/Dashboard.vue";
import DashboardHome from "./pages/DashboardHome.vue"; import DashboardHome from "./pages/DashboardHome.vue";
import Details from "./pages/Details.vue"; import Details from "./pages/Details.vue";
@ -78,7 +79,8 @@ const router = createRouter({
const app = createApp({ const app = createApp({
mixins: [ mixins: [
socket, socket,
theme theme,
mobile
], ],
data() { data() {
return { return {

25
src/mixins/mobile.js Normal file
View file

@ -0,0 +1,25 @@
export default {
data() {
return {
windowWidth: window.innerWidth,
}
},
created() {
window.addEventListener("resize", this.onResize);
},
methods: {
onResize() {
this.windowWidth = window.innerWidth;
},
},
computed: {
isMobile() {
return this.windowWidth <= 767.98;
},
}
}

View file

@ -27,7 +27,6 @@ export default {
uptimeList: { }, uptimeList: { },
certInfoList: {}, certInfoList: {},
notificationList: [], notificationList: [],
windowWidth: window.innerWidth,
showListMobile: false, showListMobile: false,
connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...", connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
} }
@ -193,10 +192,6 @@ export default {
this.$root.showListMobile = false; this.$root.showListMobile = false;
}, },
onResize() {
this.windowWidth = window.innerWidth;
},
storage() { storage() {
return (this.remember) ? localStorage : sessionStorage; return (this.remember) ? localStorage : sessionStorage;
}, },
@ -270,10 +265,6 @@ export default {
computed: { computed: {
isMobile() {
return this.windowWidth <= 767.98;
},
timezone() { timezone() {
if (this.userTimezone === "auto") { if (this.userTimezone === "auto") {