vue observable

Vue-Observable

ส่วนประกอบบทคัดย่อ Vue เพื่อใช้ประโยชน์จาก Intersectionobserver, Mutationobserver และ ResizeObserver 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> จะตรวจพบว่าองค์ประกอบที่กำหนดอยู่ในวิวพอร์ตหรือไม่ และปล่อยเหตุการณ์

อุปกรณ์ประกอบฉาก

ข้อต่อ	ที่จำเป็น	ค่าเริ่มต้น
ราก	เลขที่	โมฆะ
รูตมาร์จิน	เลขที่	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	เลขที่	โมฆะ
คุณลักษณะ	เลขที่	เท็จ
ตัวละคร	เลขที่	โมฆะ
ตัวละคร	เลขที่	โมฆะ
รายการเด็ก	เลขที่	เท็จ
ทรีย่อย	เลขที่	เท็จ

เหตุการณ์

• 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

สำนักพิมพ์

Hook 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

ใบอนุญาต

มิกซ์

สนับสนุน