vue observable

vue-observable

Résumé des composants de Vue à l'utilisation des API du navigateur de navigateur MutationObserver et ResizeObserver

Veuillez garder à l'esprit que vous aurez besoin de polyfills

? Installation

npm install --save vue-observable

? Usage

Liste de composants

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

Bundler (WebPack, Rollup)

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

Vue . use ( VueObservable )

ou

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

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

Navigateur

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

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

? Composants

IntersectionObserver - <intersect>

Le composant <intersect> détectera si un élément donné est dans la fenêtre. Et émettre un événement.

Accessoires

Soutenir	Requis	Défaut
racine	Non	nul
rootmargin	Non	0px 0px 0px 0px
seuil	Non	[0, 0.2]

Événements

• enter
• leave
• change

Usage

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

MutationObserver - <Mutation>

Accessoires

Soutenir	Requis	Défaut
attributfilter	Non	nul
attributoldvalue	Non	nul
attributs	Non	FAUX
caractéristique	Non	nul
personnageDataoldValue	Non	nul
liste d'enfants	Non	FAUX
sous-arbre	Non	FAUX

Événements

• mutation

Usage

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

ResizeObserver - <resize>

Accessoires

N / A

Événements

• resize

Usage

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

Développement

Lancer des tests visuels

npm run dev

Lancez le karma avec couverture

npm run dev:coverage

Construire

Regrouper le js et le css du dossier dist ::

npm run build

Édition

Le crochet prepublish s'assurera que les fichiers DIST sont créés avant la publication. De cette façon, vous n'avez pas besoin de les commettre dans votre référentiel.

 # 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

Licence

Mit

Soutien