vue observable

Vue-Observable

Abstract Vue Components для использования API Browser RecesectionObserver, MutationObserver и ResizeObserver

Пожалуйста, имейте в виду, что вам понадобятся многофилсы

? Установка

npm install --save vue-observable

? Использование

Компонентный список

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

Bundler (WebPack, Rollup)

 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 > 

? Компоненты

Recsectionobserver - <intersect>

Компонент <intersect> будет обнаружить, если дан определенный элемент в точке зрения. И излучать событие.

Реквизит

Проп	Необходимый	По умолчанию
корень	нет	нулевой
rootmargin	нет	0px 0px 0px 0px
порог	нет	[0, 0.2]

События

• enter
• leave
• change

Использование

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

MutationObserver - <Mutation>

Реквизит

Проп	Необходимый	По умолчанию
Атрибутфильтер	нет	нулевой
attributOldValue	нет	нулевой
атрибуты	нет	ЛОЖЬ
Характер	нет	нулевой
Характер	нет	нулевой
Слист ребенка	нет	ЛОЖЬ
поддерево	нет	ЛОЖЬ

События

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

npm run build

Издательский

prepublish Hook обеспечит создание 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

Лицензия

Грань

Поддерживать