vue observable

observable

Componentes de Vue abstractos para utilizar las API de intersectionObServer, MutationObServer y ResiceObserver

Tenga en cuenta que necesitará polyfills

? Instalación

npm install --save vue-observable

? Uso

Lista de componentes

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

Bundler (webpack, rollup)

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

Vue . use ( VueObservable )

o

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

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

Navegador

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

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

? Componentes

IntersectionObServer - <intersect>

El componente <intersect> detectará si un elemento dado está en la ventana gráfica. Y emitir un evento.

Accesorios

Apuntalar	Requerido	Por defecto
raíz	No	nulo
cañón de la raíz	No	0px 0px 0px 0px
límite	No	[0, 0.2]

Eventos

• enter
• leave
• change

Uso

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

MutationObServer - <Mutation>

Accesorios

Apuntalar	Requerido	Por defecto
AttributeFilter	No	nulo
AttributeDoldValue	No	nulo
atributos	No	FALSO
punto de carácter	No	nulo
personaje Dataoldvalue	No	nulo
lista infantil	No	FALSO
subtree	No	FALSO

Eventos

• mutation

Uso

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

ResizeObServer - <resize>

Accesorios

N / A

Eventos

• resize

Uso

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

Desarrollo

Iniciar pruebas visuales

npm run dev

Lanzar Karma con cobertura

npm run dev:coverage

Construir

Punte los JS y CSS de la carpeta dist :

npm run build

Publicación

El gancho prepublish asegurará que se creen archivos DIST antes de publicar. De esta manera, no necesita cometerlos en su repositorio.

 # 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

Licencia

MIT

Apoyo