v-dialogs

A simple style useful dialog component collection for Vue3

• Alert Interactive dialog boxes, for notifications that require explicit feedback from the user
• Modal Modal container dialog, It is displayed at the center of the screen
• Drawer Another modal container dialog, It is displayed at the edge of the screen, and it is the better choice for quickly viewing details
• Message Silent message notification, displayed in the vertical center area of ​​the screen
• Toast Silent message notification, displayed in the corner of the screen
• Mask A screen mask that blocks user actions

If you are using vue 2.x version, please use v-dialogs 2.x version instead

Examples and Documentation

Documentation and examples please visit below sites

• Github pages

Features

• Simple style, makes it easier to apply in more UI
• Provides 6 types of dialogs: Modal, Drawer, Alert, Message, Mask and Toast
• Functional form of use
• Modal and Drawer provide DialogModalBox and DialogDrawerBox component form
• Alert, Message and Toast types provides message type quick access function
• Built-in 4 languages: Chinese, English, Japanese and Portuguese
• Globally instance(not recommended)

Installation

1# npm
2npm i v-dialogs

3# yarn
4yarn add v-dialogs

5# pnpm
6pnpm add v-dialogs

API

1type MessageContent = string | VNode
2type ComponentResult = VNode | Component
3type ComponentContent = ComponentResult | (() => ComponentResult)
4
5function DialogAlert(message?: MessageContent, callback?: Function, options?: AlertOptions): Function
6function DialogMessage(message?: MessageContent, callback?: Function, options?: MessageOptions): Function
7function DialogToast(message?: MessageContent, callback?: Function, options?: ToastOptions): Function
8function DialogMask(message?: MessageContent, callback?: Function, options?: MaskOptions): Function
9function DialogModal(component: ComponentContent, options?: ModalOptions): Function
10function DialogDrawer(component: ComponentContent, options?: DrawerOptions): Function

Usage

Confirm and Message

1import { DialogAlert, DialogMessage } from 'v-dialogs'
2
3function deleteUser (userId) {
4  DialogAlert('Deleted data cannot be recovered, are you sure?', () => {
5    executeDeleteUser(userId).then(() => {
6      DialogMessage('Delete complete.', { messageType: 'success' })
7    })
8  }, { messageType: 'confirm' })
9}

Modal dialog

1import { DialogModal, DialogAlert } from 'v-dialogs'
2import UserProfile from './UserProfile.vue'
3
4DialogModal(UserProfile, {
5  width: 900,
6  height: 600,
7  title: 'User Profile',
8  params: {
9    userId: 1,
10    userName: 'Terry Zeng'
11  },
12  callback: data => {
13    DialogAlert(`Received message: ${data}`)
14  }
15})

Component form

1<template>
2  <div>
3    <DialogDrawerBox v-model:visible="visible" >
4      <UserProfile />
5    </DialogDrawerBox>
6
7    <button
8      type="button"
9      @click="openDialog"
10    >Open Drawer</button>
11  </div>
12</template>
13
14<script setup>
15import { ref } from 'vue'
16import { DialogDrawerBox } from 'v-dialogs'
17
18import UserProfile from './UserProfile.vue'
19
20const visible = ref(false)
21
22function openDialog () {
23  visible.value = true
24}
25</script>

Fetch data

1import { DialogMask, DialogMessage, DialogAlert } from 'v-dialogs'
2
3function loadDataList () {
4  const destroy = DialogMask()
5
6  fetchData()
7    .then(data => {
8      list.value = data.list
9      // Dismiss mask overlay
10      destroy()
11      DialogMessage('Data loaded successfully', { messageType: 'success' })
12    })
13    .catch(() => {
14      DialogAlert('Data Load Failure', { messageType: 'error' })
15    })
16}

Message type quick access

Alert, Message and Toast types provides message type quick access function

1import {
2  DialogMessage
3  DialogMessageSuccess
4} from 'v-dialogs'
5
6DialogMessageSuccess('Saved successfully!')
7// Equivalent to
8DialogMessage('Saved successfully!', { messageType: 'success' })

Globally instance

v-dialogs also provides a globally instance to open dialogs, you can use it in any component

The default instance name is $dlg

1import { createApp } from 'vue'
2import dialogs from 'v-dialogs'
3import App from 'App.vue'
4
5createApp(App).use(dialogs).mount('#app')

The global instance are only supported as a feature and are not recommended for use

Option API

1export default {
2  mounted () {
3    this.$dlg.message('Saved successfully!')
4  }
5}

Composition API

1import { getCurrentInstance } from 'vue'
2
3// const $dlg = getCurrentInstance().appContext.config.globalProperties.$dlg
4const $dlg = getCurrentInstance().proxy.$dlg
5
6$dlg.message('Saved successfully!')