vuejs-snackbar

Repository

https://github.com/livelybone/vuejs-snackbar

Example

Set position
Trigger

Code


var vue = new Vue({
el: '#app',
template: '<snackbar baseSize="1rem" ref="snackbar" :holdTime="5000" :position="position"/>',
data: function () {
return {
position: 'top-center'
}
},
components: { 'snackbar': VueSnackbar }
})

window.addEventListener('DOMContentLoaded', function () {
getEl('.gray')[0].addEventListener('click', function () {
vue.$refs.snackbar.open('Open function triggered')
})
getEl('.green')[0].addEventListener('click', function () {
vue.$refs.snackbar.info('Info function triggered')
})
getEl('.yellow')[0].addEventListener('click', function () {
vue.$refs.snackbar.warn('Warn function triggered')
})
getEl('.red')[0].addEventListener('click', function () {
vue.$refs.snackbar.error('Error function triggered')
})
getEl('#position')[0].addEventListener('click', function (ev) {
if (ev.target.className !== 'btn-group') vue.position = ev.target.innerText
})
})