Dialogs

Dilogs very easy to implement and practical to use in any case and need.

Alert

To inform the user you can use the alert type dialogs by calling the $vs.alert function, the parameters are:

  • title
  • text
  • textConfirm
  • color
  • confirm
this.$vs.alert({
  title:'Dialog alert Default',
  text:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
  textConfirm:'Aceptar',
  color:'rgb(233, 112, 197)',
  confirm:()=>{
    // Function a ejecutar cuando se confirma
  },
})

Confirm

There are times when we need the user's confirmation for it, we have the $ vs.confirm function that as parameters has::

  • title
  • text
  • color
  • confirm
  • cancel

TIP

The function within confirm can be an arrow function to take advantage of the global scope of vue.

confirm:()=>{
  this.$vs.notify({    title:'Eliminado',
    text:'Lorem ipsum dolor sit amet',
    color:'danger',
  })
},

In case of using a normal function you would have to make use of a variable

confirm(){
  var _this = this  this.$vs.confirm({
    title:'Dialog Confirm Default',
    text:'Lorem ipsum dolor sit amet, consectetur adipisicing elit.',
    color:'danger',
    confirm:()=>{
      _this.$vs.notify({
        title:'Eliminado',
        text:'Lorem ipsum dolor sit amet',
        color:'danger',
      })
    },
  })
},

Prompt

You can obtain a user value through the function $vs.prompt.

null

API #

NameTypeParametersDescriptiondefault
$vs.alert()FunctionObject, JSONFunction that runs the Alert dialog.
$vs.confirm()FunctionObject, JSONFunction that executes the Confirm dialog.
$vs.prompt()FunctionObject, JSONFunction that executes the dialog prompt.
colorStringprimary, success, danger, warning, dark, RGB, HEXDialog color.
titleStringTitle dialog.
textStringText dialog.
textConfirmStringText of the confirm button in the dialog.
textCancelStringCancel button text in the dialog.
confirmFunction(value) only in the dialog promptFunction that is executed when confirming the dialog.
cancelFunction(value) only in the dialog promptFunction that is executed when canceling in the dialog.
inputObjectplaceholder, type, maxLength, valueParameters of the dialog prompt input (in the type parameter the inputs are not allowed checkBox, radio or button).