Simple Vue Modal
Install:
npm install vue-modal2
Import:
// main.js
import Vue from 'vue'
import VModal2 from 'vue-modal2'
import 'vue-modal2/dist/vue-modal2.css'
Vue.use(VModal2)
Use:
<!-- app.vue -->
<template>
<div>
<button @click="$modal2.show('greet')">
Show Modal
</button>
<v-modal2 name="greet">
Welcome!
</v-modal2>
</div>
</template>
- Write an component that wrap your reusable modal:
<!-- modal-alert.vue -->
<template>
<v-modal2 ref="modal">
<div style="padding: 10px">
<h2 style="margin: 5px 0 10px;">{{ title }}</h2>
<div>{{ message }}</div>
<button
style="display: block; width: 100%; padding: 5px; margin-top: 10px;"
@click="$refs.modal.hide()"
>OK</button>
</div>
</v-modal2>
</template>
<script>
export default {
props: {
message: { type: String, required: true },
title: { type: String, default: 'Warning' },
},
}
</script>
- Import and register it:
// main.js
import ModalAlert from './modal-alert.vue'
Vue.use(VModal, {
register: {
'alert': ModalAlert,
},
})
- Show the modal in any vue component:
// app.vue
this.$modal2.alert({
message: 'Are you OK?',
})
show(name)
: Show the modal with namename
;hide(name)
: Hide the modal with namename
;<modalName>(props)
: Show the globally registered reusable modal;
Name | Type | Required | Default |
---|---|---|---|
width | Number | false | 600 |
height | Number | false | 300 |
click-to-close | Boolean | false | true |
pivotX | Number | false | 0.5 |
pivotY | Number | false | 0.5 |
theme | String | false | 'default' |
overlay-class | String | false | '' |
overlay-style | Object | false | {} |
content-class | String | false | '' |
content-style | Object | false | {} |
duration | Number | false | 0.3 |
slideOffset | Number | false | -50 |
- before-open
- opened
- before-close
- closed
MIT