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
Documentation and examples please visit below sites
- 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
DialogModalBoxandDialogDrawerBoxcomponent form - Alert, Message and Toast types provides message type quick access function
- Built-in 4 languages:
Chinese,English,JapaneseandPortuguese - Globally instance(not recommended)
# npm
npm i v-dialogs
# yarn
yarn add v-dialogs
# pnpm
pnpm add v-dialogstype MessageContent = string | VNode
type ComponentResult = VNode | Component
type ComponentContent = ComponentResult | (() => ComponentResult)
function DialogAlert(message?: MessageContent, callback?: Function, options?: AlertOptions): Function
function DialogMessage(message?: MessageContent, callback?: Function, options?: MessageOptions): Function
function DialogToast(message?: MessageContent, callback?: Function, options?: ToastOptions): Function
function DialogMask(message?: MessageContent, callback?: Function, options?: MaskOptions): Function
function DialogModal(component: ComponentContent, options?: ModalOptions): Function
function DialogDrawer(component: ComponentContent, options?: DrawerOptions): Functionimport { DialogAlert, DialogMessage } from 'v-dialogs'
function deleteUser (userId) {
DialogAlert('Deleted data cannot be recovered, are you sure?', () => {
executeDeleteUser(userId).then(() => {
DialogMessage('Delete complete.', { messageType: 'success' })
})
}, { messageType: 'confirm' })
}import { DialogModal, DialogAlert } from 'v-dialogs'
import UserProfile from './UserProfile.vue'
DialogModal(UserProfile, {
width: 900,
height: 600,
title: 'User Profile',
params: {
userId: 1,
userName: 'Terry Zeng'
},
callback: data => {
DialogAlert(`Received message: ${data}`)
}
})<template>
<div>
<DialogDrawerBox v-model:visible="visible" >
<UserProfile />
</DialogDrawerBox>
<button
type="button"
@click="openDialog"
>Open Drawer</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { DialogDrawerBox } from 'v-dialogs'
import UserProfile from './UserProfile.vue'
const visible = ref(false)
function openDialog () {
visible.value = true
}
</script>import { DialogMask, DialogMessage, DialogAlert } from 'v-dialogs'
function loadDataList () {
const destroy = DialogMask()
fetchData()
.then(data => {
list.value = data.list
// Dismiss mask overlay
destroy()
DialogMessage('Data loaded successfully', { messageType: 'success' })
})
.catch(() => {
DialogAlert('Data Load Failure', { messageType: 'error' })
})
}Alert, Message and Toast types provides message type quick access function
import {
DialogMessage
DialogMessageSuccess
} from 'v-dialogs'
DialogMessageSuccess('Saved successfully!')
// Equivalent to
DialogMessage('Saved successfully!', { messageType: 'success' })v-dialogs also provides a globally instance to open dialogs, you can use it in any component
The default instance name is $dlg
import { createApp } from 'vue'
import dialogs from 'v-dialogs'
import App from 'App.vue'
createApp(App).use(dialogs).mount('#app')The global instance are only supported as a feature and are not recommended for use
export default {
mounted () {
this.$dlg.message('Saved successfully!')
}
}import { getCurrentInstance } from 'vue'
// const $dlg = getCurrentInstance().appContext.config.globalProperties.$dlg
const $dlg = getCurrentInstance().proxy.$dlg
$dlg.message('Saved successfully!')