To show modal in a bootstrap compatible way, for Vue 2.x
** Updated package to exclude bootstrap css and js, you need to install bootstrap-loader**
npm install vue2-bootstrap-modal --save
Require the component (globally or in another component)
components: {
'bootstrap-modal': require('vue2-bootstrap-modal')
},
Then in your template:
<div>
...
<bootstrap-modal ref="theBootstrapModal" :needHeader="false" :needFooter="false">
<div slot="title">
Your title here
</div>
<div slot="body">
Your body here
</div>
<div slot="footer">
Your footer here
</div>
</bootstrap-modal>
...
</div>
Modal functions are exposed through the ref variable
Opens the modal
Closes the modal
True if you need to show the header
Default value is true
True if you need to show the footer
Default value is true
See index.html
for example use
My way of using this is to write a component which use this modal component, add proper elements into slots, then call open, close and handle the elements event as needed.
Expose configuration, like backdrop darkness value
Contributions are welcomed
0.1.4 Add needFooter
and needHeader
props
0.1.0 Initial release
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build