2.0.4 • Published 2 years ago
vue-modality-v3 v2.0.4
vue-modality-v3
A really nice Vue.js modal component. (Compatible with Vue.js 3)
Demo
Installation
NPM
$ npm install vue-modality-v3Register the component globally...
import { createApp } from 'vue'
import App from './App.vue'
import VueModalityV3 from 'vue-modality-v3';
import 'vue-modality-v3/dist/style.css'
// don't forget to load the css file
createApp(App)
.component('VueModalityV3', VueModalityV3)
.mount('#app')... or import it locally
<script setup>
import VueModalityV3 from 'vue-modality-v3';
import 'vue-modality-v3/dist/style.css'
</script>Usage
<button @click="openMyModal()">Open</button>
<vue-modality-v3 ref="myRef" title="My Title" centered>
body content
</vue-modality-v3><script setup>
import { ref } from 'vue';
const myRef = ref(null)
const openMyModal = () => { myRef.value.open() }
</script>Available props
| 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 |
Events
| 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 |