vue popup

พอยแพ็ป Vue

VUE 2.x ส่วนประกอบเมนูคลิกขวา

ลักษณะ:

• คำนวณตำแหน่งกล่องป๊อปอัพแบบไดนามิก
• การตรวจจับขอบเพื่อให้แน่ใจว่าขอบของเฟรมป๊อปอัพไม่เกินพื้นที่มุมมอง
• ป๊อปอัพเดียวสามารถจับคู่องค์ประกอบทริกเกอร์หลายองค์ประกอบ (องค์ประกอบหลายองค์ประกอบถูกเขียนภายใต้เทมเพลตเดียวกัน)

ติดตั้ง

CDN

 < script src =" //cdn.jsdelivr.net/gh/beyoursun/vue-popup/dist/vue-popup.js " > </ script >

NPM

npm install @xunlei/vue-popup --save

ใช้

ก่อนอื่นคุณต้องลงทะเบียนปลั๊กอิน

 import Vue from 'vue'
import VuePopup from '@xunlei/vue-popup'

Vue . use ( VuePopup )

ใช้ส่วนประกอบ popup ในไฟล์ .vue ของคุณ

 < template >
  < div >
    < popup ref =" popup1 " :display.sync =" showPop " >
      < h3 >标题</ h3 >
      < p >这是一段内容。 </ p >
    </ popup >
    < a v-popup:popup1 href =" javascript:; " >展示弹出框</ a >
  </ div >
</ template >

< script >
export default {
  data ( ) {
    return {
      showPop : false
    }
  }
}
</ script >

เพิ่มการอ้างอิง ref ในส่วนประกอบ popup ของคุณและใช้คำสั่ง v-popup เพื่อแมปปุ่มไปยังกล่องป๊อปอัป คุณลักษณะ display ใช้เพื่อกำหนดค่าว่ากล่องป๊อปอัพสามารถมองเห็นได้หรือไม่

นี่คือตัวอย่างออนไลน์ง่ายๆ

ส่วนต่อประสาน

ข้อต่อ

ชื่อแอตทริบิวต์	อธิบาย	พิมพ์	ค่าเสริม	ค่าเริ่มต้น
ผนวกต่อร่างกาย	วางไว้ใต้ร่างกาย	บูลีน	-	จริง
ลูกศร	ชั้นเรียนของลูกศร	สาย	-	-
ทิศทาง	ทิศทางกล่องป๊อปอัพ	สาย	top/topstart/topend/ขวา/ขวา/rightend/bottom/bottomstart/bottomend/ซ้าย/ซ้าย/leftstart/leftend	ด้านล่าง
แสดง (.sync)	มองเห็นได้หรือไม่	บูลีน	-	เท็จ
การขยาย	ระยะห่างระหว่างกล่องป๊อปอัพและองค์ประกอบทริกเกอร์	ตัวเลข	-	0
สิ่งกระตุ้น	ประเภทเหตุการณ์ที่ทริกเกอร์กล่องป๊อปอัพ	สาย	โฮเวอร์ / โฟกัส / คลิก	โฉบ
การแสดงแบบเลื่อน	กล่องป๊อปอัพจะมองเห็นได้หรือไม่เมื่อหน้าเลื่อนหน้า	บูลีน	-	จริง

เหตุการณ์

ชื่อเหตุการณ์	อธิบาย	พารามิเตอร์การโทรกลับ
แสดง	เหตุการณ์การแสดงผลกล่องป๊อปอัพ	ค่า
ซ่อน	กล่องป๊อปอัพซ่อนกิจกรรม	ค่า

คำแนะนำ

v-popup

• คำอธิบาย: จำเป็นต้องเพิ่มคำสั่งลงในองค์ประกอบที่กระตุ้นกล่องป๊อปอัพ

• พารามิเตอร์:

  • popupRef (required) - ใช้เพื่อจับคู่กล่องป๊อปอัพเฉพาะ

• พิมพ์:

  • any (optional) - พารามิเตอร์การโทรกลับผ่านเมื่อเหตุการณ์ถูกทริกเกอร์

• ตัวอย่าง:

 < popup
  ref =" popup1 "
  :display.sync =" showPop "
  @show =" handleShow "
  @hide =" handleHide " >
</ popup >
< a v-popup:popup1 =" val " > </ a >

< scirpt >
export default {
  ...
  methods: {
    handleShow (val) { },
    handleHide (val) { }
  }
}
</ script >

สไตล์

ส่วนประกอบป๊อปอัพจะเพิ่มสไตล์และคลาสที่จำเป็นเช่นด้านบนซ้าย ... สไตล์ที่เฉพาะเจาะจงจะต้องได้รับจากผู้ใช้

เมื่อกล่องป๊อปอัพเปลี่ยนทิศทางสี่คลาสต่อไปนี้จะถูกเพิ่มลงในองค์ประกอบรูทของกล่องป๊อปอัพเพื่อให้ตรงกับสไตล์ในทิศทางที่แตกต่างกัน

• เมื่อกล่องป๊อปอัพอยู่เหนือองค์ประกอบทริกเกอร์: ป๊อปอัพสุดยอด
• เมื่อกล่องป๊อปอัพต่ำกว่าองค์ประกอบทริกเกอร์: ก้นป๊อปอัพ
• เมื่อกล่องป๊อปอัพถูกทริกเกอร์ไปทางซ้ายขององค์ประกอบ: ป๊อปอัพซ้าย
• เมื่อกล่องป๊อปอัพถูกทริกเกอร์ทางด้านขวาขององค์ประกอบ: ป๊อปอัพ-ขวา

สร้างขั้นตอน

 # clone the project repo
git clone https://github.com/beyoursun/vue-popup.git

# install dependencies
cd vue-popup && npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

ใบอนุญาต

มิกซ์