Vue.js . के साथ 18 पॉपअप घटक उदाहरण

समस्याओं को खत्म करने के लिए हमारे साधन का प्रयास करें

Vue.js . के साथ 18 पॉपअप घटक उदाहरण

1.A11yसंवाद दृश्य

यह a11y-dialog@5.2.0 के लिए एक Vue.js आवरण घटक है।
देखें A11yDialog



डेमो: https://www.npmjs.com/package/vue-a11y-dialog






गिटहब पर देखें



2. मोडल विंडो व्यू

Vue.js के लिए मोडल जैसी सरल विंडो।
मोडल विंडो व्यू



गिटहब पर देखें






3.Vue2 स्लाइडआउट पैनल

स्टैकेबल स्लाइडआउट पैनल बनाने के लिए Vue.js घटक।

Vue2 स्लाइडआउट पैनल

प्रलेखन
https://officert.github.io/vue-slideout-panel

गिटहब पर देखें

4.व्यू स्वीटअलर्ट2

SweetAlert2 के लिए Vue.js रैपर।
व्यू स्वीटअलर्ट2

डेमो: https://avil13.github.io/vue-sweetalert2/

गिटहब पर देखें

5.व्यू.जेएस मोडल

SSR समर्थन के साथ उपयोग में आसान, उच्च अनुकूलन योग्य, मोबाइल के अनुकूल Vue.js 2.0+ मोडल।

Vue.js मोडल

गिटहब पर देखें

6. Vuejs डायलॉग प्लगइन

एक हल्का, वादा आधारित चेतावनी, शीघ्र और पुष्टि संवाद।
Vuejs डायलॉग प्लगइन

डेमो
https://godofbrowser.github.io/vuejs-dialog/

गिटहब पर देखें

7.मैसेजबॉक्स व्यू

यह घटक संदेश के साथ उपयोगकर्ता को क्यू करने का एक आसान तरीका प्रदान करने के लिए उपस्थित है, लेकिन बोउसर के तरीके से नहीं।

देशी टेम्पलेट मुक्त प्रतिक्रिया करें

संदेशबॉक्स दृश्य

लाइव डेमो https://zhangxiang958.github.io/vue-messageBox/

गिटहब पर देखें

8.व्यू व्यूअर

व्यू के लिए इमेज व्यूअर कंपोनेंट, व्यूअर.जेएस के आधार पर रोटेशन, स्केल, जूम वगैरह को सपोर्ट करता है
व्यूज व्यूअर

डेमो: https://mirari.cc/v-viewer/

गिटहब पर देखें

9. Vue.js के लिए शुद्ध JS लाइटबॉक्स घटक

बिना किसी निर्भरता के बहुत ही सरल लाइटबॉक्स प्लगइन - केवल Vue!

Vue.js . के लिए शुद्ध JS लाइटबॉक्स घटक

लाइव डेमो यहां उपलब्ध है: https://codepen.io/DCzajkowski/pen/rzOErW .

गिटहब पर देखें

10. सिमेंटिक मोडल देखें

Jquery के बिना Vue2 के लिए एक और सिमेंटिक-यूआई मोडल घटक, लेकिन शुद्ध Vue संक्रमण के साथ

यह घटक केवल मोडल के लिए एक फ्रेम और संक्रमण प्रदान करता है। एक आंतरिक मोडल का विन्यास अपने आप होता है, और यह सिमेंटिक-यूआई के सामान्य तरीके से लगभग समान होना चाहिए। यदि आप सुनिश्चित नहीं हैं कि इसे कैसे कॉन्फ़िगर करें, तो अनुसरण करें आधिकारिक उदाहरण

डेमो स्रोत

देखें या सिमेंटिक मोडल

गिटहब पर देखें

11. डायलॉग ड्रैग देखें

एक व्यू ड्रैग करने योग्य संवाद घटक

डायलॉग ड्रैग व्यू

डेवलपर्स के लिए सबसे अच्छा एपिस

विशेषताएं:

  • खींचें और छोड़ें
  • टच सपोर्ट (केवल ड्रैग के लिए, ड्रॉप के लिए नहीं)
  • ड्रॉप क्षेत्र घटक
  • 'पिन मोड', ड्रैग को लॉक करने के लिए।

डेमो: https://emiliorizzo.github.io/vue-dialog-drag/

गिटहब पर देखें

12.वी आईएमजी

v-img Vue.js के लिए एक प्लगइन है जो आपको img टैग में केवल एक निर्देश जोड़कर पूर्ण-स्क्रीन गैलरी में चित्र दिखाने की अनुमति देता है।

वी आईएमजी
डेमो: https://v-img.review/

गिटहब पर देखें

13. सिमेंटिक मोडल व्यू

के लिए मोडल घटक अर्थ-यूआई jQuery के बिना
सिमेंटिक मोडल व्यू

गिटहब पर देखें

14.Vue2 सरल

Vue 2 सरल अलर्ट घटक (स्वीट अलर्ट से प्रेरित) https://vue2-simplert.gitbook.io/docs/

Vue2 सरल

गिटहब पर देखें

15.व्यू इमेज लाइटबॉक्स

Vuejs . के लिए एक साधारण छवि लाइटबॉक्स घटक

प्रतिक्रिया-छवियों से सीएसएस शैली का प्रयोग करें

व्यू इमेज लाइटबॉक्स

डेमो!

प्रतिक्रिया-चिपचिपा नवबार

गिटहब पर देखें

16.व्यू.जेएस मोडल

उपयोग में आसान, उच्च अनुकूलन योग्य, मोबाइल के अनुकूल Vue.js 2.0+ मोडल। http://vue-js-modal.yev.io

Vue.js मोडल

डेमो: http://vue-js-modal.yev.io/

गिटहब पर देखें

17.स्वीटमोडल

मोडल्स के लिए सबसे प्यारी लाइब्रेरी। अब Vue.js के लिए उपलब्ध है।

यह छवि का शीर्षक है

उदाहरण
उदाहरण के लिए देखें डेमो पेज .

गिटहब पर देखें

18.व्यू मोडल डायलॉग्स

डायलॉग्स का वादा!

एक विशिष्ट और आवश्यक प्रकार का उपयोगकर्ता इंटरैक्शन संवाद है। डायलॉग्स किसी तरह प्रॉमिस से मिलते-जुलते हैं। एक संवाद अंततः बंद हो जाएगा। एक वादा अंततः हल हो जाएगा। डायलॉग बंद होने पर कुछ डेटा लौटाता है। वैसे ही वादा करता है। उन्हें एक साथ रखने का समय आ गया है।

vue-modal-dialogs में डायलॉग्स को वादों में बदलने का जादू है। Vue.js एप्लिकेशन में डेवलपर्स डायलॉग्स को बहुत आसानी से बना और नियंत्रित कर सकते हैं। विशेष रूप से कुछ जटिल परिस्थितियों में जैसे एकाधिक संवादों को नियंत्रित करना, नेस्टेड संवाद इत्यादि।

यदि आपके कोई प्रश्न, समस्या या नए विचार हैं, तो बेझिझक कोई मुद्दा या पीआर खोलें।

व्यू मोडल डायलॉग्स

गिटहब पर देखें

#vuejs #जावास्क्रिप्ट # vue-js