https://github.com/luongvm/vue2-bootstrap-modal
Vue 2.x Bootstrap-themed Modal
https://github.com/luongvm/vue2-bootstrap-modal
bootstrap modal vue2
Last synced: 6 months ago
JSON representation
Vue 2.x Bootstrap-themed Modal
- Host: GitHub
- URL: https://github.com/luongvm/vue2-bootstrap-modal
- Owner: luongvm
- License: mit
- Created: 2016-11-24T18:20:15.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T21:26:37.000Z (over 3 years ago)
- Last Synced: 2024-04-14T12:29:22.972Z (about 2 years ago)
- Topics: bootstrap, modal, vue2
- Language: Vue
- Size: 748 KB
- Stars: 29
- Watchers: 4
- Forks: 14
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue2-bootstrap-modal
> Bootstrap Modal Component for Vue 2.x
> Updated package to exclude bootstrap css and js, you need to install bootstrap-loader
[](https://nodei.co/npm/vue2-bootstrap-modal/)
## Install
``` bash
npm install vue2-bootstrap-modal --save
```
## Usage
Require the component (globally or in another component)
```
components: {
'bootstrap-modal': require('vue2-bootstrap-modal')
},
```
Then in your template:
```
...
Your title here
Your body here
Your footer here
...
```
Finally call `theModal.open()` and `theModal.close()` whenever you need.
## Documentation
Modal functions and callbacks are exposed through the **ref** variable
### open() `function`
Opens the modal
### close() `function`
Closes the modal
### opened `callback`
Called after modal is opened. Pass your own method to be called
### closed `callback`
Called after modal is closed. Pass your own method to be called
### need-header `boolean`
True if you need to show the header
Default value is `true`
### need-footer `boolean`
True if you need to show the footer
Default value is `true`
### size `string`
Use one of these values to change the modal size
Value | Bootstrap class
--|--
`small` | `modal-sm`
`medium` | `modal-md`
`large` | `modal-lg`
`full` | `modal-full`
Default value is empty
## Example
See ```index.html``` for example use
## To-do
Expose configuration, like backdrop darkness value
## Contributing
Contributions are welcome!
## Release History
0.2.0 Updated After Vue2 EOL, fix CVEs, and simplify the repo
0.1.15 Last old version
0.1.12 Add `opened` and `closed` event callbacks, correct examples
0.1.11 Add `full` value for `size` props
0.1.7 Add `size` props
0.1.4 Add `needFooter` and `needHeader` props
0.1.0 Initial release
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
```