V-Offline 简单的VueJS组件来检测离线和在线事件
V-Offline 简单的VueJS组件来检测离线和在线事件
JavaScript Vue.js相关
共270Star
详细介绍
⚡️
![npm downloads](https://camo.githubusercontent.com/f336650602eb9572a2b4834f6409987eac2a1b68/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f646d2f762d6f66666c696e652e737667)
V-Offline
-
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
- Vue.js 2.x
✅
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. |