Dialog
Dialog component for Vue Bulma.
Installation
$ npm install vue-bulma-dialog2 --save
Examples
<template>
<div>
<button class="button is-info" @click="openDialogWithType('info')">Info</button>
<button class="button is-warning" @click="openDialogWithType('warning')">Warning</button>
</div>
</template>
<script>
import Vue from 'vue'
import Dialog from 'vue-bulma-dialog2'
const DialogComponent = Vue.extend(Dialog)
const openDialog = (propsData = {
title: '',
message: '',
type: '',
direction: 'Down',
container: '.dialogs'
}) => {
return new DialogComponent({
el: document.createElement('div'),
propsData
})
}
export default {
components: {
Dialog
},
mounted () {
openDialog({
message: 'Success lorem ipsum dolor sit amet, consectetur adipiscing elit lorem ipsum dolor sit amet, consectetur adipiscing elit',
type: 'alert'
})
},
methods: {
openDialogWithType (type) {
openDialog({
title: 'This is a title',
message: 'This is the message.',
type: type
})
}
}
}
</script>
Badges
nferzhuang.com · GitHub @nfer ·