Bootstrap style modal component for vue.
import Bootstrap.css
<link href="bootstrap.css"></link> NOTE: By default, the modal style is pure bootstrap style, you can use any 3rd party bootstrap framework, like above GIF.
simple options:
<!--text content--> <modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel"> Modal Text </modal> <!--custom content--> <modal title="Modal Title" :show.sync="show" @ok="ok" @cancel="cancel"> <div>Modal Body</div> <div slot="header">Modal Header</div> <div slot="title">Modal Title</div> <div slot="footer">Modal Footer</div> </modal>#Props
props: { show: { type: Boolean, twoWay: true, default: false }, title: { type: String, default: 'Modal' }, // Bootstrap small style modal small: { type: Boolean, default: false }, // Bootstrap large style modal large: { type: Boolean, default: false }, // Bootstrap full style modal full: { type: Boolean, default: false }, // if it set false, click background will close modal force: { type: Boolean, default: false }, // vue transition name transition: { type: String, default: 'modal' }, // [OK button] text okText: { type: String, default: 'OK' }, // [Cancel button] text cancelText: { type: String, default: 'Cancel' }, // [OK button] className okClass: { type: String, default: 'btn blue' }, // [Cancel button] className cancelClass: { type: String, default: 'btn red btn-outline' }, // automatically close when click [OK button] closeWhenOK: { type: Boolean, default: false } }MIT