Globally register toast plugin allows us to call this.$toast.info({})
from anywhere for a toast.
Currently styled types:
- error
- info
52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
import Vue from "vue";
|
|
import ToastComponent from "./Toast";
|
|
|
|
const optionsDefaults = {
|
|
data: {
|
|
type: "info",
|
|
show: true,
|
|
timeout: 4500,
|
|
|
|
onCreate(created = null) {},
|
|
onEdit(editted = null) {},
|
|
onRemove(removed = null) {}
|
|
}
|
|
};
|
|
|
|
function toast(options) {
|
|
// merge the default options with the passed options.
|
|
const root = new Vue({
|
|
data: {
|
|
...optionsDefaults.data,
|
|
...options
|
|
},
|
|
render: createElement => createElement(ToastComponent)
|
|
});
|
|
|
|
root.$mount(document.body.appendChild(document.createElement("div")));
|
|
}
|
|
|
|
export default {
|
|
install(vue) {
|
|
console.log("Installing toast plugin!");
|
|
|
|
Vue.prototype.$toast = {
|
|
info(options) {
|
|
toast({ type: "info", ...options });
|
|
},
|
|
success(options) {
|
|
toast({ type: "success", ...options });
|
|
},
|
|
warning(options) {
|
|
toast({ type: "warning", ...options });
|
|
},
|
|
error(options) {
|
|
toast({ type: "error", ...options });
|
|
},
|
|
simple(options) {
|
|
toast({ type: "simple", ...options });
|
|
}
|
|
};
|
|
}
|
|
};
|