vue observable

vue-observable

مكونات VUE المجردة لاستخدام intersectionobserver و mutationObserver و ResizeObserver Browser APIs

يرجى مراعاة أنك ستحتاج إلى تعددات

؟ تثبيت

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 > 

؟ عناصر

InterSectionObserver - <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>

الدعائم

دعم	مطلوب	تقصير
AttributeFilter	لا	باطل
attributeoldvalue	لا	باطل
صفات	لا	خطأ شنيع
الحرف	لا	باطل
الحرف dairdataoldvalue	لا	باطل
قائمة الطفل	لا	خطأ شنيع
الشجرة الفرعية	لا	خطأ شنيع

الأحداث

• mutation

الاستخدام

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

ResizeObserver - <resize>

الدعائم

ن/أ

الأحداث

• resize

الاستخدام

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

تطوير

إطلاق الاختبارات المرئية

npm run dev

إطلاق الكرمة مع التغطية

npm run dev:coverage

يبني

حزمة JS و CSS إلى مجلد dist :

npm run build

نشر

سيضمن خطاف prepublish أن يتم إنشاء ملفات 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

رخصة

معهد ماساتشوستس للتكنولوجيا

يدعم