عزیزالله سعیدی
5 سال پیش توسط عزیزالله سعیدی مطرح شد
5 پاسخ

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

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


ثبت پرسش جدید
سیدعلی موسوی
تخصص : سی شارپ و پی اچ پی
@juza66 5 سال پیش آپدیت شد
0

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


عزیزالله سعیدی
تخصص : Database Developer
@azizullahsaeidi 5 سال پیش مطرح شد
0

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


داود خانی
تخصص : برنامه نویس لاراول و متخصص سئو...
@davoodkhany 5 سال پیش آپدیت شد
0

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


داود خانی
تخصص : برنامه نویس لاراول و متخصص سئو...
@davoodkhany 5 سال پیش آپدیت شد
0

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

https://vuejs.org/v2/examples/modal.html

سیدعلی موسوی
تخصص : سی شارپ و پی اچ پی
@juza66 5 سال پیش مطرح شد
0

نمونه کد

<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
    }
});

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام