vue popup

Vue-popup

Vue 2.x Komponen Menu Klik Kanan

ciri:

• Menghitung posisi kotak pop-up secara dinamis
• Deteksi tepi untuk memastikan bahwa tepi bingkai pop-up tidak melebihi area tampilan
• Satu pop-up dapat cocok dengan beberapa elemen pemicu (beberapa elemen ditulis di bawah templat yang sama)

Memasang

CDN

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

NPM

npm install @xunlei/vue-popup --save

menggunakan

Pertama, Anda perlu mendaftarkan plugin.

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

Vue . use ( VuePopup )

Gunakan komponen popup di file .vue Anda.

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

Tambahkan referensi ref pada komponen popup Anda dan gunakan arahan v-popup untuk memetakan tombol ke kotak popup. Fitur display digunakan untuk mengonfigurasi apakah kotak pop-up terlihat.

Berikut adalah contoh online sederhana.

antarmuka

Menopang

Nama atribut	menggambarkan	jenis	Nilai opsional	nilai default
ditambahkan ke tubuh	Letakkan di bawah tubuh	Boolean	-	BENAR
Panah-kelas	Kelas panah	Rangkaian	-	-
Arah	Arah kotak pop-up	Rangkaian	Top/TopStart/Topend/Right/RightStart/RightEnd/Bottom/BottomStart/Bottomend/Left/LeftStart/LeftEnd	dasar
display (.sync)	Apakah itu terlihat	Boolean	-	PALSU
lapisan	Jarak antara kotak pop-up dan elemen pemicu	Nomor	-	0
pemicu	Jenis acara yang memicu kotak pop-up	Rangkaian	Arwah / Fokus / Klik	melayang
Gulungan-pertunjukan	Apakah kotak pop-up terlihat saat halaman bergulir	Boolean	-	BENAR

peristiwa

Nama Acara	menggambarkan	Parameter Callback
menunjukkan	Acara tampilan kotak pop-up	nilai
Bersembunyi	Kotak pop-up menyembunyikan acara	nilai

petunjuk

v-popup

• Deskripsi: Arahan perlu ditambahkan ke elemen yang memicu kotak pop-up.

• parameter:

  • popupRef (required) - Digunakan untuk mencocokkan kotak popup tertentu.

• jenis:

  • any (optional) - Parameter panggilan balik berlalu ketika acara dipicu.

• Contoh:

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

gaya

Komponen pop-up hanya akan menambah gaya dan kelas yang diperlukan, seperti atas, kiri ... Gaya spesifik perlu diberikan oleh pengguna.

Ketika kotak pop-up mengubah arah, empat kelas berikut akan ditambahkan ke elemen root dari kotak pop-up untuk mencocokkan gaya dalam arah yang berbeda.

• Saat kotak popup di atas elemen pemicu: popup-top
• Saat kotak pop-up di bawah elemen pemicu: popup-bottom
• Saat kotak pop-up dipicu ke kiri elemen: Popup-kiri
• Saat kotak pop-up dipicu ke kanan elemen: popup-right

Membangun langkah

 # 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

Lisensi

Mit