1.0.6 • Published 2 years ago
vue-simple-dialog v1.0.6
vue-simple-dialog
Installation
npm i vue-simple-dialog -DDescription
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>