Using npm:
npm install vue-lsi-util
"vue-lsi-util": "latest"
import snackbar from 'vue-lsi-util/snackbar'
import loading from 'vue-lsi-util/loading'
import alertDialog from 'vue-lsi-util/alertDialog'
import sonidos from 'vue-lsi-util/sonidos'
snackbar, loading, alertDialog, sonidos
import LSIMensajes from 'vue-lsi-util'
import store from '@/store'
LSIMensajes
<LSIMensajes />
Para mostrarlo:
store.dispatch("snackbar/mostrar", "Mensaje de error")
Para mostrarlo:
store.dispatch("loading/mostrar", "Cargando datos...")
Para ocultarlo:
store.dispatch("loading/ocultar")
Para mostrarlo:
store.dispatch("alertDialog/mostrar", payload)
Atributos posibles del payload:
- titulo
- mensaje (el ; se usa como separador de renglones y se reemplaza por <br>)
- botonPrimario
- botonSecundario
- botonTerciario
- callback
Ejemplo de uso (versión ultra resumida):
store.dispatch("alertDialog/mostrar", { mensaje: 'El proceso finalizó <b>exitosamente</b>' })
Ejemplo de uso (versión muy resumida):
store.dispatch("alertDialog/mostrar",
{ titulo: 'Proceso exitoso 👍',
mensaje: 'El proceso finalizó <b>exitosamente</b>'
}
)
Ejemplo de uso (versión resumida):
store.dispatch("alertDialog/mostrar",
{ titulo: 'Proceso exitoso 👍',
mensaje: 'El proceso finalizó <b>exitosamente</b>',
botonPrimario: "Entendido"
}
)
Ejemplo de uso (versión completa):
const textoPrimario="Si, borrarlo"
const textoSecundario="Lo voy a pensar"
const textoTerciario="OK, no lo borres"
const ad={
titulo: 'Confirma la eliminación?',
mensaje: 'Este proceso es <b>irreversible</b>;;Está <u>completamente seguro?</u>',
botonPrimario: textoPrimario,
botonSecundario: textoSecundario,
botonTerciario: textoTerciario,
callback: ((respuesta) => {
if (respuesta==textoPrimario) {
console.log("Presionó el botón primario")
} else if (respuesta==textoSecundario) {
console.log("Presionó el botón secundario")
} else {
console.log("Presionó el botón terciario")
}
})
}
store.dispatch("alertDialog/mostrar", ad)
store.dispatch("sonidos/exito")
Para ocultarlo:
store.dispatch("sonidos/error")