vue observable

Vue-Observable

초록 VUE 구성 요소, IntersectionObserver, MutationObserver 및 ResizeObserver Browser API를 활용합니다.

폴리 필이 필요하다는 점을 명심하십시오

? 설치

npm install --save vue-observable

? 용법

componentlist

• <intersect>
• <mutation>
• <resize>

Bundler (웹 팩, 롤업)

 import Vue from 'vue'
import VueObservable from 'vue-observable'

Vue . use ( VueObservable )

또는

 import { Intersect , Mutation , Resize } from 'vue-observable'

export default {
  components : { Intersect , Mutation , Resize }
}

브라우저

 <!-- Include after Vue -->
<!-- Local files -->
< script src =" vue-observable/dist/vue-observable.js " > </ script >

<!-- From CDN -->
< script src =" https://unpkg.com/vue-observable " > </ script > 

? 구성 요소

IntersectionObserver- <intersect>

<intersect> 구성 요소는 주어진 요소가 뷰포트에 있는지 감지합니다. 이벤트를 방출합니다.

소품

소품	필수의	기본
뿌리	아니요	널
루트 마진	아니요	0px 0px 0px 0px
한계점	아니요	[0, 0.2]

이벤트

• enter
• leave
• change

용법

 < intersect @enter =" enterMethod " @leave =" leaveMethod " @change =" changeMethod " >
  < some-component-or-node >
</ intersect >

돌연변이 관상 서버 - <Mutation>

소품

소품	필수의	기본
AttributeFilter	아니요	널
AttributeDValue	아니요	널
속성	아니요	거짓
캐릭터 데이터	아니요	널
문자 dataoldValue	아니요	널
어린이 목록	아니요	거짓
하위 트리	아니요	거짓

이벤트

• mutation

용법

 < mutation @mutation =" mutationMethod " >
  < some-component-or-node >
</ mutation >

RESIZEOBSERVER- <resize>

소품

N/A

이벤트

• resize

용법

 < resize @resize =" resizeMethod " >
  < some-component-or-node >
</ resize > 

개발

시각적 테스트를 시작하십시오

npm run dev

커버리지로 업장을 시작하십시오

npm run dev:coverage

짓다

JS 및 CSS를 dist Folder에 번들로 묶습니다.

npm run build

출판

prepublish 후크는 게시하기 전에 Dist 파일이 생성되도록합니다. 이렇게하면 저장소에 커밋 할 필요가 없습니다.

 # Bump the version first
# It'll also commit it and create a tag
npm version
# Push the bumped package and tags
git push --follow-tags
# Ship it 
npm publish

특허

MIT

지원하다