<template>
<div id="app" v-if="showCard">
<HeadNav></HeadNav>
<router-view v-cloak v-if="isRouterAlive" />
<!-- 返回顶部组件 -->
<scroll-to></scroll-to>
<!-- 客服 -->
<div class="kefu" @click="contact">
<img src="@/assets/imgs/kefu.png" />
<span>在线咨询</span>
</div>
</div>
</template>
<script>
import HeadNav from "@/components/header.vue";
import scrollTo from "@/components/scrollTo.vue";
export default {
components: { HeadNav, scrollTo },
data() {
return {
isRouterAlive: true, //控制视图是否显示的变量
screenWidth: document.body.clientWidth,
showCard: false, //控制页面的显示
};
},
watch: {
screenWidth(val) {
// 为了避免频繁触发resize函数导致页面卡顿,使用定时器
if (!this.timer) {
// 一旦监听到的screenWidth值改变,就将其重新赋给data里的screenWidth
this.screenWidth = val;
this.timer = true;
let that = this;
setTimeout(function () {
// 打印screenWidth变化的值
let w = that.screenWidth;
if (w <= 1080) {
//手机端
location.href = "移动端";
} else {
location.href = "PC端";
}
that.timer = false;
}, 400);
}
},
},
created() {
if (this._isMobile()) {
//手机端
location.href = "移动端";
}
},
methods: {
// 在线咨询
contact() {
window.open(
"####",
"_blank",
"height=600, width=600, top=50, left=50, toolbar=no, menubar=no, scrollbars=no, resizable=no, location=no, status=no"
);
},
//Vue判断设备是移动端还是pc端
_isMobile() {
let flag = navigator.userAgent.match(
/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
);
return flag;
},
},
mounted() {
function checkIE() {
return (
"-ms-scroll-limit" in document.documentElement.style &&
"-ms-ime-align" in document.documentElement.style
);
}
if (checkIE()) {
window.addEventListener(
"hashchange",
() => {
var currentPath = window.location.hash.slice(1);
if (this.$route.path !== currentPath) {
this.$router.push(currentPath);
}
},
false
);
}
if (this._isMobile()) {
//手机端
location.href = "移动端";
}
const that = this;
window.onresize = () => {
return (() => {
window.screenWidth = document.body.clientWidth;
that.screenWidth = window.screenWidth;
})();
};
//显示页面
this.showCard = true;
},
};
</script>
<style scoped lang="scss">
[v-cloak] {
display: none;
}
</style>
通过监听页面宽度切换移动端和PC端
最新推荐文章于 2024-01-02 10:39:08 发布