2.0.4 • Published 2 months ago

vue-modality-v3 v2.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

vue-modality-v3

A really nice Vue.js modal component. (Compatible with Vue.js 3)

Demo

Installation

NPM

$ npm install vue-modality-v3

Register 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

PropTypeDefaultDescription
widthString400px
centeredBooleanfalseVertically centered
overlayBooleanfalse
text-centerBooleanfalse
titleStringModal
title-classString
hide-headerBooleanfalse
hide-footerBooleanfalse
ok-titleStringOk
ok-disabledBooleanfalse
ok-classString
ok-loadingBooleanfalseShows the loading icon
hide-okBooleanfalseHides the ok button
cancel-titleStringCancel
cancel-disabledBooleanfalse
cancel-classString
hide-cancelBooleanfalseHides the cancel button
no-close-on-backdropBooleanfalse
no-close-on-escBooleanfalse
errorBooleanfalseShows error icon
successBooleanfalseShows success icon

Events

EventDescription
openWhen you open the modal
hideWhen you hide the modal
okWhen the Ok button is pressed
cancelWhen the Cancel button is pressed
2.0.4

2 months ago

2.0.3

2 months ago

2.0.2

2 months ago

1.1.0

2 months ago

2.0.1

2 months ago

2.0.0

2 months ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago