vue observable

Vue-observável

Resumo Vue componentes para utilizar o intersectionObserver, mutationObServer e REDRIEDOBSERVER APIs do navegador

Por favor, lembre -se de que você precisará de polyfills

? Instalação

npm install --save vue-observable

? Uso

ComponentList

• <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 }
}

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>

O componente <intersect> detectará se um determinado elemento estiver na viewport. E emite um evento.

Adereços

Prop	Obrigatório	Padrão
raiz	não	nulo
rootMargin	não	0px 0px 0px 0px
limite	não	[0, 0.2]

Eventos

• enter
• leave
• change

Uso

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

MutationObServer - <Mutation>

Adereços

Prop	Obrigatório	Padrão
atribuitfilter	não	nulo
attributeoldValue	não	nulo
atributos	não	falso
CaracterData	não	nulo
CaracterDataoldValue	não	nulo
Childlist	não	falso
subárvore	não	falso

Eventos

• mutation

Uso

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

REDRIMEDOBSERVER - <resize>

Adereços

N / D

Eventos

• resize

Uso

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

Desenvolvimento

Inicie testes visuais

npm run dev

Lance Karma com cobertura

npm run dev:coverage

Construir

Agrupar o JS e o CSS da pasta dist :

npm run build

Publicação

O gancho prepublish garantirá que os arquivos DIS sejam criados antes da publicação. Dessa forma, você não precisa cometê -los em seu repositório.

 # 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

Licença

Mit

Apoiar