A really nice Vue.js modal component. (compatible with Vue.js 2)
If you are looking for the Vue.js 3 version, visit: vue-modality-v3
NPM
$ npm install vue-modalityRegister the component globally...
import Vue from 'vue'
import VueModality from 'vue-modality'
Vue.use(VueModality)... or register it locally
import VueModality from 'vue-modality'
export default {
components: {
VueModality
}
};<vue-modality ref="myRef" title="My Title" centered>
body content
</vue-modality>// give your modal a ref and open it by calling:
this.$refs.myRef.open()
// or close it by calling:
this.$refs.myRef.hide()<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-modality</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-modality"></script>
</head>
<body>
<h1>Vue-Modality</h1>
<div id="app">
<button @click="$refs.example.open()">
Open the modal
</button>
<vue-modality ref="example" @ok="$refs.example.hide()" @cancel="$refs.example.hide()" title="Modal" centered>
Use the footer buttons to close the modal
</vue-modality>
</div>
<script>
const vueApp = new Vue({el: '#app'});
</script>
</body>
</html>| Prop | Type | Default | Description |
|---|---|---|---|
| width | String | 400px | |
| centered | Boolean | false | Vertically centered |
| overlay | Boolean | false | |
| text-center | Boolean | false | |
| title | String | Modal | |
| title-class | String | ||
| hide-header | Boolean | false | |
| hide-footer | Boolean | false | |
| ok-title | String | Ok | |
| ok-disabled | Boolean | false | |
| ok-class | String | ||
| ok-loading | Boolean | false | Shows the loading icon |
| hide-ok | Boolean | false | Hides the ok button |
| cancel-title | String | Cancel | |
| cancel-disabled | Boolean | false | |
| cancel-class | String | ||
| hide-cancel | Boolean | false | Hides the cancel button |
| no-close-on-backdrop | Boolean | false | |
| no-close-on-esc | Boolean | false | |
| error | Boolean | false | Shows error icon |
| success | Boolean | false | Shows success icon |
| Event | Description |
|---|---|
| open | When you open the modal |
| hide | When you hide the modal |
| ok | When the Ok button is pressed |
| cancel | When the Cancel button is pressed |