Dialogs
Dialogs very easy to implement and practical to use in any case and need.
Alert
To generate a dialog we have the global function $vs.dialog
the parameters to generate the dialog are
- title: title of the dialogue - String
- text: internal text of the dialog - String
- color: color of the component - Colors, RGB, HEX
- accept: function that executes the user accept the dialog - Function
- cancel: function that executes the user to cancel the dialog (if it is a confirm type) - Function
- type: determines the type of dialog (alert or confirm) - alert, confirm
- buttonAccept: determines the type of accept button - Boolean
- buttonCancel: determines the type of cancel button - Boolean
TIP
For Composition API, you can use inject to retrieve $vs :
import { inject } from 'vue'
const $vs = inject('$vs')
$vs.dialog({
title: 'Dialog',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.'
})
since vuesax3@^4.0.24
Confirm
If you need a dialog of type confirm you can do it just by changing the type as a parameter inside the main function.
TIP
To do some action when the user approves or confirms we have the property accept:myFunctionAccept
.
Prompt
To add a dialog of type prompt we have a global function a completely independent component vs-prompt
. This allows more flexibility with the input and ability to add any type of input and components.
TIP
The properties of the component are equivalent to those of the global function only with the vs before each property something like
function = color
component = vsColor
<div slot="input">
<input v-model="val" type="text" name="" value="">
</div>