باز و بسته کردن Bootstrap Modal توسط vuejs

4 ماه پیش
توسط داود خانی آپدیت شد
عزیزالله سعیدی ( 6530 تجربه )
4 ماه پیش
تخصص : Database Developer

چگونه میتوانیم یک Bootstrap Modal را با vuejs نمایش داد؟ در حالت عادی میتوان مودال را باز و بسته کرد اما زمانی کی در داخل فایل .vue قرار دهیم نمی توانیم Bootstrap Modal را باز و بسته کرد.

سیدعلی موسوی ( 89066 تجربه )
4 ماه پیش
تخصص : سی شارپ و پی اچ پی

پیشنهاد میکنم شما تویی vue از لینک زیر بوتسرپ vue استفاده کنی
https://bootstrap-vue.js.org/docs/components/modal/

عزیزالله سعیدی ( 6530 تجربه )
4 ماه پیش
تخصص : Database Developer

موسوی عزیز @juza66 پروژه قبلا با Bootstrap 4 نوشته شده، ایا کدام راهی دیگر وجود دارد کی بتوانیم این مشکل را هندل کنیم؟

داود خانی ( 30728 تجربه )
4 ماه پیش

سلام خسته نباشی با یه دستور v-if راحت می تونی هندلش کنی که اگه رو اون دکمه مورد نظر کلیک شد مودال مورد نظر نمایش داده بشه

داود خانی ( 30728 تجربه )
4 ماه پیش

می تونی از این لینک زیر هم استفاده کنی استفاده کردنش هم راحته فقط شما ازش الگو بگیر چکار کرده.

https://vuejs.org/v2/examples/modal.html
سیدعلی موسوی ( 89066 تجربه )
4 ماه پیش
تخصص : سی شارپ و پی اچ پی

نمونه کد

<div id="root">
    <button class="btn" @click="showModal=true">Show</button>
     <modal v-if="showModal" @close="showModal = false" name="Umesh">
            <p>dsfkdskf</p>
     </modal>

</div>

کد css

.modal-active{
    display:block;
}

کد vue

Vue.component("modal",{
    props:['name'],
    template:`
        <div class="modal fade in modal-active">
            <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" @click="$emit('close')" class="close"><span >&times;</span></button>
                            <h4 class="modal-title">
                                {{name}}
                            </h4>
                        </div>
                        <div class="modal-body">
                                <slot></slot>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" @click="$emit('close')">Close</button>
                            <button type="button" class="btn btn-primary">Save changes</button>
                        </div>
                </div>
            </div>
        </div>`
})

new Vue({
    el:"#root",
    data:{
        showModal:false
    }
});
برای ارسال پاسخ باید وارد سایت شوید