🎺 🛴 🎅🏾 VueJs + VueRouter + मोडल। एक और बाइक 👰🏼 👨🏻‍🚒 🏮

शुभ दोपहर इस लेख में, मैं एक विधि का विश्लेषण करूँगा जो आपको पता बदलते समय हमारी आवश्यकताओं के लिए एक मोडल विंडो दिखाने की अनुमति देती है। मुझे पता है कि आधिकारिक वेबसाइट पर मॉडल घटक के लिए एक मालिकाना समाधान है। इसके अलावा, हुबे पर कई अन्य लेख हैं जो वीयूजे (उदाहरण के लिए, यह एक ) में मोडल खिड़कियों के विषय के लिए समर्पित हैं।

हालांकि, मेरी राय में, उनमें से प्रत्येक की अपनी कमियां हैं, उदाहरण के लिए:

बंद साइट पर वर्णित घटकों के मामले में, आपको एक अलग चर बनाने और इसे बांधने की आवश्यकता है;
दूसरा लेख तीसरे पक्ष के समाधान पर चर्चा करता है। इस मामले में, आपको समय बिताने और यह पता लगाने की आवश्यकता है कि इन घटकों का उपयोग कैसे करें + अतिरिक्त, मेरी राय में, परियोजना में निर्भरताएं। और मैं इस स्थिति को पकड़ता हूं: जितना आसान होगा उतना ही अच्छा होगा।

फिर, मुझे सब कुछ पता नहीं चल सकता है, इसलिए, यदि आपके पास कहने या नोट करने के लिए कुछ है, तो मैं रचनात्मक आलोचना के लिए खुला हूं। इसके अलावा हम उन उपकरणों की विशेष रूप से मानक कार्यक्षमता का उपयोग करेंगे जो हम उपयोग करते हैं (Vue, VueRouter, बूटस्ट्रैप मोडल)। तो, बिंदु के करीब ...

ऐसे लोग होंगे जो कहते हैं: "एनपीएम निर्भरता को मोडल के लिए कनेक्ट करने से बेहतर है कि पूरे बूटस्ट्रैप या गुड़ को खींचने के लिए।" कामरेड, कोई भी आपको इस पूरी चीज़ को अपनी ज़रूरतों और औज़ारों से जोड़ने से नहीं रोक रहा है। उपरोक्त उपकरण कार्यान्वयन का एक उदाहरण हैं।

तुरंत काम करने का विकल्प ।

एचटीएमएल

<div id="app"> <nav> <router-link :to="{ name: 'modal' }" exact>Open Modal</router-link> </nav> <router-view></router-view> </div>

जावास्क्रिप्ट

 Vue.use(VueRouter) const Modal = { template: `<div class="modal fade" tabindex="-1" role="dialog" ref="modal"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal title</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div class="modal-body"> <p>Modal body text goes here.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> </div> </div> </div> </div> mounted: function(){ console.log('mounted') var context = this; $(this.$refs.modal).modal('show') $(this.$refs.modal).on('hidden.bs.modal', function(){ context.$router.go(-1); }) } } const routes = [ { path: '/modal', name: 'modal', component: Modal }, ] const router = new VueRouter({ routes, }) // New VueJS instance var app = new Vue({ // CSS selector of the root DOM element el: '#app', // Inject the router into the app router, })

दरअसल, कुछ भी जटिल नहीं है।

हमारे लिंक पर क्लिक करते समय, हमारा मोडल घटक आरोहित होता है।
इसे बढ़ते समय, हम अपनी मोडल विंडो खोलते हैं और इसके माध्यम से । $ Refs हम इसके समापन को ट्रैक करते हैं।
जब यह बंद हो जाता है, तो हम प्रोग्राम को व्यक्ति को एक कदम पीछे लौटाते हैं ताकि हमारा घटक अनमाउंट हो।

इस प्रकार, इस तरह के एक दृष्टिकोण और इस तरह की संरचना एक अच्छा समाधान है यदि आप अपने स्वयं के अलग तर्क के साथ कई मोडल विंडो की योजना बनाते हैं:

आसान अनुकूलन;
तृतीय-पक्ष निर्भरता को लोड करने की आवश्यकता नहीं है। मेरे लिए व्यक्तिगत रूप से, जितना अधिक सरल हो;

VueJs + VueRouter + मोडल। एक और बाइक

More articles: