vue-simple-dialog

Installation

npm i vue-simple-dialog -D

Description

a lightweight customizable dialog box

API

Property	Description	Type	Default	Required
visible	whether the dialog box is visible	boolean		true
top	value for top of dialog CSS	string	false	false
maskColor	mask background-color	string	rgba(0,0,0,.45)	false
dialogStyle	dialog style	CSSProperties	{ width: '30%', height: '400px', background: '#fff' }	false

event

Events Name	Description	Arguments	Version
on-close	triggers when the dialog closes	() => void

Using

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import vueSimpleDialog from 'vue-simple-dialog';
import 'vue-simple-dialog/dist/style.css';

createApp(App).use(vueSimpleDialog).mount('#app')

Example

demo.vue

<script setup lang="ts">
import { ref } from 'vue';

const visible = ref(false);
const handleClose = () => {
  console.log('dialog is closed')
};
</script>

<template>
  <vue-simple-dialog 
    v-model:visible="visible" 
    top="10%" 
    @on-close="handleClose" 
    :dialog-style="{
      width: '30%',
      height: '400px',
      borderRadius: '2px',
      background: '#fff',
    }"
  >
    dialog slot
  </vue-simple-dialog>
  <button @click="visible = true">test dialog</button>
</template>