online-prop - 온라인 상태인가요? 작은 VueJS 플러그인(<1kb).

나는 단지 한 가지만 원했고 단 한 가지만 원했습니다.

모든 Vue 구성 요소에서 사용자가 인터넷에 연결되어 있는지 여부를 알려주는 반응 속성$online을 원합니다.

이미 많은 기존vue-online 패키지가 있다는 것을 알고 있지만... 아니요, 번들로 제공되는 추가 UI 구성 요소가 필요하지 않습니다...

그래서 나는 vue-online-prop ( npm , github )

설정:

import VueOnlineProp from "vue-online-prop"
Vue.use(VueOnlineProp)

용법:

<div v-if="!$online"> 
    You are currently offline!
</div>

짜잔.



그게 다야!

(기타) 만드는 방법

Javascript로 온라인 상태인지 확인하는 방법
navigator.onLine를 사용하여 Javascript를 통해 인터넷 연결을 쿼리하고 창에서 online 및 offline 이벤트를 사용하여 연결에 대한 변경 사항을 수신할 수 있습니다.

👉 MDN docs on navigator.onLine


VueJS 플러그인 만들기

이 플러그인은 단순히 창에서 online 및 offline 이벤트를 수신하고 navigator.onLine 값을 플러그인이 관리하는 반응 속성status으로 설정합니다. 플러그인이 Vue.use(VueOnlineProp) 를 사용하여 설치되면 beforeCreate 믹스인이 추가되어 반응 속성status을 모든 구성 요소의 $online 속성에 바인딩합니다. (👉 Here's the code )