vue popup

vue-popup

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/يمين/يمين/يمين/أسفل/أسفل/أسفل/أسفل/اليسار/اليسار/اليسار	قاع
عرض (.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 >

أسلوب

سيضيف المكون المنبثق فقط الأنماط والفئات اللازمة ، مثل الأعلى ، اليسار ... يجب أن يعطى المستخدم النمط المحدد.

عندما يغير مربع المنبثقة الاتجاه ، ستتم إضافة الفئات الأربعة التالية إلى عنصر الجذر في المربع المنبثق لمطابقة الأنماط في اتجاهات مختلفة.

• عندما يكون المربع المنبثقة فوق عنصر الزناد: popup-top
• عندما يكون المربع المنبثقة أسفل عنصر الزناد: القاع المنبثق
• عندما يتم تشغيل المربع المنبثق على يسار العنصر: المنبثقة اليسار
• عندما يتم تشغيل المربع المنبثق على يمين العنصر: منبثق يمين

بناء الخطوات

 # 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

رخصة

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