To generate a dialog we have the global function $vs.dialog the parameters to generate the dialog are
Alert Primary
Alert Success
Alert Danger
Alert Warning
Alert Dark
Alert Color RGB | HEX
<template>
<vs-button @click="openAlert('primary')" color="primary" type="flat">Alert Primary</vs-button>
<vs-button @click="openAlert('success')" color="success" type="flat">Alert Success</vs-button>
<vs-button @click="openAlert('danger')" color="danger" type="flat">Alert Danger</vs-button>
<vs-button @click="openAlert('warning')" color="warning" type="flat">Alert Warning</vs-button>
<vs-button @click="openAlert('dark')" color="dark" type="flat">Alert Dark</vs-button>
<vs-button @click="openAlert('#FF6F91')" color="primary" type="gradient">Alert Color RGB | HEX</vs-button>
</template>
<script>
export default {
data:()=>({
colorAlert:'primary',
titleAlert:'Alert',
activeAlert:false,
valueInput:'',
}),
methods:{
openAlert(color){
this.colorAlert = color
this.$vs.dialog({
color:this.colorAlert,
title: `Dialog - ${this.colorAlert}`,
text: 'I love soufflé lollipop liquorice wafer jelly-o halvah sesame snaps. Pastry chocolate cake jelly-o carrot cake jelly topping croissant ice cream.',
accept:this.acceptAlert
})
},
acceptAlert(){
this.$vs.notify({
color:this.colorAlert,
title:'Accept Selected',
text:'Gingerbread soufflé biscuit oat cake.'
})
}
}
}
</script>