Simple usage
import halfModal from "vue-aboslute-compoents/modal-half.vue";
import vacAlert from "vue-aboslute-compoents/dialog-alert.vue";
new Vue({
template: `
<div>
<modal-half v-model="boolean">
put anything you want on default slot,
there are no predefined styles
</modal-half>
<vac-alert title="title text"
message="message text..."
button-ok="ok button label",
callback="v-bind here a function"></vac-alert>
</div>
`,
components: { halfModal, vacAlert }
})
remm v-model is an alias for v-bind:value + v-on:input, that means this modal will emit input when you close it by the black layer, syncronyzing with your boolean, in other hand you may define a button to close it directly from the current component
Use with API (dialog components only)
import vac from "vue-absolute-components";
Vue.use(vac) // Insert core styles and dialogs API
new Vue({
mounted() { // now you can acess dialogs API
this.alert({
title: "titulo",
message: "mensagem...",
buttonOk: "Ok",
callback: function() {
console.log();
}
})
this.confirm({
title: "titulo",
message: "mensagem...",
buttonOk: "Ok",
buttonCancel: "Cancelar",
callback: function() {
console.log();
}
})
this.prompt({
title: "titulo",
message: "mensagem...",
buttonOk: "Ok",
buttonCancel: "cancelar",
placeHolder: "anything...",
callback: function(text) {
console.log(text);
}
})
this.choose({
title: "titulo",
message: "mensagem...",
buttons: ["button0", "button1"],
buttonCancel: "cancelar",
callback: function(btnIndex) {
console.log(btnIndex);
}
})
}
})