vue observable

vue-beobachtbar

Abstract VUE -Komponenten zur Verwendung des IntersectionObserver, der MutationObserver und der Reiseobserver -Browser -APIs

Bitte denken Sie daran, dass Sie Polyfills benötigen

? Installation

npm install --save vue-observable

? Verwendung

Komponentenliste

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

Bundler (Webpack, Rollup)

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

Vue . use ( VueObservable )

oder

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

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

Browser

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

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

? Komponenten

IntersectionObserver - <intersect>

Die <intersect> -Komponente erkennt, ob sich ein bestimmtes Element im Ansichtsfenster befindet. Und ein Ereignis aussagen.

Requisiten

Stütze	Erforderlich	Standard
Wurzel	NEIN	NULL
rootmargin	NEIN	0px 0px 0px 0px
Schwelle	NEIN	[0, 0.2]

Ereignisse

• enter
• leave
• change

Verwendung

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

MutationObserver - <Mutation>

Requisiten

Stütze	Erforderlich	Standard
AttributeFilter	NEIN	NULL
AttributeoldValue	NEIN	NULL
Attribute	NEIN	FALSCH
CharakterDaten	NEIN	NULL
CharakterDataoldValue	NEIN	NULL
Childlist	NEIN	FALSCH
Subtree	NEIN	FALSCH

Ereignisse

• mutation

Verwendung

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

ResizeObserver - <resize>

Requisiten

N / A

Ereignisse

• resize

Verwendung

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

Entwicklung

Starten Sie visuelle Tests

npm run dev

Starten Sie Karma mit Berichterstattung

npm run dev:coverage

Bauen

Bündeln Sie die JS und CSS des dist -Ordners:

npm run build

Veröffentlichung

Der prepublish Hook stellt sicher, dass Dist -Dateien vor der Veröffentlichung erstellt werden. Auf diese Weise müssen Sie sie nicht in Ihrem Repository festlegen.

 # 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

Lizenz

MIT

Unterstützung