fln-vuetify-message
v0.1.8
Published
implements message box from vuetify
Downloads
3
Maintainers
Readme
fln-vuetify-message v0.1.8
implements message box from vuetify
Requirement
vue
vuetify
Installation
$ npm i --save fln-vuetify-message
Usage Sample
<template>
<div id="app" data-app>
<v-btn @click="alert1">simple alert</v-btn>
<v-btn @click="alert2">custom buttons</v-btn>
<v-btn @click="alert3">custom buttons 02</v-btn>
<v-btn @click="alert4">with callback</v-btn>
<v-btn @click="input1">simple input</v-btn>
<v-btn @click="input2">input with buttons</v-btn>
<v-btn @click="snackbar1">simple snackbar</v-btn>
<v-btn @click="snackbar2">snackbar options</v-btn>
<v-btn @click="confirm">confirm</v-btn>
<router-view/>
</div>
</template>
<script>
import message from 'fln-vuetify-message'
// for close in back event suport, in main.js use(https://www.npmjs.com/package/fln-vue-router-monitor):
// import monitor from 'fln-vue-router-monitor'
// monitor.use(router) // router is instance of vue-router
export default {
methods: {
alert1(){
message.alert('simple alert')
},
alert2(){
message.alert({
text: 'Do you want to continue?',
btOk: 'Yes',
btCancel: {text:'No', color:'red'}
})
},
alert3(){
message.alert({
title: 'Alert',
text: 'this information is important',
btOk: {text: 'Ok', color:'blue'}
})
},
alert4(){
message.alert({
text: 'continue with deletion?',
btOk: 'Yes',
btCancel: 'Cancelar',
callback(bt){
message.alert(bt=='ok' ? 'deletion success' : 'action canceled')
}
})
},
input1(){
message.input('write something').then((event) => {
console.log(event)
})
},
input2(){
message.input({
btOk:'Confirm',
btCancel: 'Cancel',
text: 'write something'
}).then((event) => {
console.log(event)
})
},
confirm(){
message.confirm('confirm action').then((bt)=>{
console.log(bt)
})
},
snackbar1(){
message.snackbar('simple snackbar')
},
snackbar2(){
message.snackbar({
text: 'snackbar text content 3000ms timeout',
btClose: '',
timeout: 3000,
color: 'error'
})
}
}
}
</script>