一、通用方法，Html5在window.navigator对象上添加了一个属性onLine 返回布尔值 true表示在线.同时新增了两个事件：

    window.addEventListener('online',  function(){
     // 网络由异常到正常时触发
    });
    window.addEventListener('offline', function(){
     // 网络由正常常到异常时触发
    });

在vue中实现思路如下：

  1. data中初始化在线状态。
data(){
    return{
        onLine: navigator.onLine,
    }
}
  1. mounted中监听事件
mounted(){
    window.addEventListener('online',  this.updateOnlineStatus);
    window.addEventListener('offline', this.updateOnlineStatus);
}
  1. 方法中改变onLine值
methods:{
    updateOnlineStatus(e) {
    	const { type } = e;
        this.onLine = type === 'online';
      },
}
  1. 最后 最好在销毁时解除事件监听
beforeDestroy(){
 window.removeEventListener('online',  this.updateOnlineStatus);
 window.removeEventListener('offline', this.updateOnlineStatus);
},

完整测试代码如下：

<template>
	<div>
		
		<div class="tab">
			<div class="hd">
				<span v-bind:class="{cur:lanmu=='xinwen'}" v-on:click="change('xinwen')">新闻</span>
				<span v-bind:class="{cur:lanmu=='tupian'}" v-on:click="change('tupian')">图片</span>
				<span v-bind:class="{cur:lanmu=='junshi'}" v-on:click="change('junshi')">军事</span>
			</div>
			<div class="bd">
				<div class="xinwen">{{lanmu}}</div>
			</div>
		</div>		
	</div>
</template>
<script>
    export default {
		data() {
			 return {
				lanmu:"xinwen",
				onLine: navigator.onLine,
			 }
		},
		methods:{
			change:function(str){
				this.lanmu = str;	
			},
			updateOnlineStatus(e) {
				const { type } = e;
				this.onLine = type === 'online';
				console.log("网络由异常")
			},
 
        },
		mounted(){
			window.addEventListener('online',  this.updateOnlineStatus);// 网络由异常到正常时触发
 
			window.addEventListener('offline', this.updateOnlineStatus);// 网络由正常常到异常时触发
		}
	}
</script>
<style>
	.tab{
		width: 360px;
		height: 260px;
		border:1px solid #000;
		margin:100px auto;
	}
	.tab .hd{overflow: hidden;}
	.tab .hd span{
		float: left;
		width: 120px;
		height: 40px;
		line-height: 40px;
		background-color:#ccc;
		text-align: center;
	}
	.tab .hd span.cur{
		background-color: orange;
	}
       
</style>

二、另外也可以采用H5的API拓展plusready来实现

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>Events Example</title>
	<script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener("plusready", onPlusReady, false);
function onPlusReady(){
	document.addEventListener("netchange", onNetChange, false);  
}
function onNetChange(){
	var nt = plus.networkinfo.getCurrentType();
	switch (nt){
		case plus.networkinfo.CONNECTION_ETHERNET:
		case plus.networkinfo.CONNECTION_WIFI:
		alert("Switch to Wifi networks!"); 
		break; 
		case plus.networkinfo.CONNECTION_CELL2G:
		case plus.networkinfo.CONNECTION_CELL3G:
		case plus.networkinfo.CONNECTION_CELL4G:
		alert("Switch to Cellular networks!");  
		break; 
		default:
		alert("Not networks!"); 
		break;
	}
}
	</script>
	</head>
	<body >
	</body>
</html>

官方文档请参阅下述网址：
http://www.html5plus.org/doc/zh_cn/events.html

# vue.js # css # javascript # visual studio code
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign