V-Offline 简单的VueJS组件来检测离线和在线事件

V-Offline 简单的VueJS组件来检测离线和在线事件

JavaScript Vue.js相关

访问GitHub主页

共270Star

详细介绍

V-Offline ⚡️ Build Status github release npm version Build Status npm downloads

  • Detect offline & online events for your vue app.

  • This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐️ if you like it 🍻

  • Demo here -> 💯 Webpackbin Link

Requirements

✅ Install 👌 

npm install v-offline
// or
yarn add v-offline

✅ Usage 🎓

Register the component globally:

Vue.component('detectNetwork', require('v-offline'));

Or use locally

import detectNetwork from 'v-offline';

✅ Example 1 🍀 

<detect-network v-on:detected-condition="detected">
	<div slot="online">Your Online Content!</div>
	<div slot="offline">Your Offline Content!</div>
</detect-network>
Vue.component('example-component', {
	data() {
		return {
			state: null,
		}
	},
	methods: {
		detected(e) {
			this.state = e;
		}
	}
});

✅ Example 2 🍀 

<detect-network>
	<div slot="online">Your Online Content!</div>
	<div slot="offline">Your Offline Content!</div>
</detect-network>

✅ 📖 Props

Name Type Required? Description
onlineClass String No Styling the div which you want to give if you're online.
offlineClass String No Styling the div which you want to give if you're offline.

✅ 👂 Events

Name Description
detected-condition Emits an Boolean value which can be used for multiple purposes in your app.

NPM :octocat:

NPM

推荐源码