https://github.com/terryz/v-dialogs
A simple style useful dialog component collection for Vue
https://github.com/terryz/v-dialogs
alert dialog es6 javascript mask modals toast vue
Last synced: 6 months ago
JSON representation
A simple style useful dialog component collection for Vue
- Host: GitHub
- URL: https://github.com/terryz/v-dialogs
- Owner: TerryZ
- License: mit
- Created: 2018-04-16T01:49:51.000Z (over 7 years ago)
- Default Branch: dev
- Last Pushed: 2024-08-12T02:22:09.000Z (about 1 year ago)
- Last Synced: 2024-09-22T09:09:12.552Z (about 1 year ago)
- Topics: alert, dialog, es6, javascript, mask, modals, toast, vue
- Language: JavaScript
- Homepage: https://terryz.github.io/docs-vue3/dialog/
- Size: 1.45 MB
- Stars: 129
- Watchers: 9
- Forks: 27
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG-CN.md
- License: LICENSE
Awesome Lists containing this project
README
# [v-dialogs](https://terryz.github.io/docs-vue3/dialog/)
[](https://circleci.com/gh/TerryZ/v-dialogs/tree/master)
[](https://codecov.io/gh/TerryZ/v-dialogs)
[](https://www.npmjs.com/package/v-dialogs)
[](https://mit-license.org/)
[](https://www.npmjs.com/package/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](https://github.com/TerryZ/v-dialogs/tree/dev-vue-2) version instead
## Examples and Documentation
Documentation and examples please visit below sites
- [Github pages](https://terryz.github.io/docs-vue3/dialog/)
## 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
```sh
# npm
npm i v-dialogs
# yarn
yarn add v-dialogs
# pnpm
pnpm add v-dialogs
```
## API
```ts
type 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): Function
```
## Usage
### Confirm and Message
```ts
import { 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' })
}
```
### Modal dialog
```ts
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}`)
}
})
```
### Component form
```vue
Open Drawer
import { ref } from 'vue'
import { DialogDrawerBox } from 'v-dialogs'
import UserProfile from './UserProfile.vue'
const visible = ref(false)
function openDialog () {
visible.value = true
}
```
### Fetch data
```ts
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' })
})
}
```
### Message type quick access
**Alert**, **Message** and **Toast** types provides message type quick access function
```ts
import {
DialogMessage
DialogMessageSuccess
} from 'v-dialogs'
DialogMessageSuccess('Saved successfully!')
// Equivalent to
DialogMessage('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`
```js
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
### Option API
```js
export default {
mounted () {
this.$dlg.message('Saved successfully!')
}
}
```
### Composition API
```js
import { getCurrentInstance } from 'vue'
// const $dlg = getCurrentInstance().appContext.config.globalProperties.$dlg
const $dlg = getCurrentInstance().proxy.$dlg
$dlg.message('Saved successfully!')
```