How to call MessageBox components globally in vue.js

This article mainly introduces the relevant knowledge of "how to call MessageBox components globally in vue.js". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to call MessageBox components globally in vue.js" can help you solve the problem.

Component template

/ src/components/MessageBox/index.vue {{title}} {{content}}

{{cancelBtnText}} {{confirmBtnText}} export default {props: {title: {type: String, default: 'title'}, content: {type: String, default: 'this is pop-up content'}, isShowInput: false, inputValue:', isShowCancelBtn: {type: Boolean, default: true}, isShowConfimrBtn: {type: Boolean, default: true}, cancelBtnText: {type: String Default: 'cancel'}, confirmBtnText: {type: String, default:'OK'}, data () {return {isShowMessageBox: false, resolve:', reject:', promise:'/ / Save promise object} }, methods: {/ / confirm, determine promise as resolve state confirm: function () {this.isShowMessageBox = false; if (this.isShowInput) {this.resolve (this.inputValue);} else {this.resolve ('confirm');} this.remove ();}, / / cancel promise as reject state cancel: function () {this.isShowMessageBox = false; this.reject (' cancel'); this.remove () }, / / pop up messageBox and create promise object showMsgBox: function () {this.isShowMessageBox = true; this.promise = new Promise ((resolve, reject) = > {this.resolve = resolve; this.reject = reject;}); / / return promise object return this.promise;}, remove: function () {setTimeout () = > {this.destroy ();}, destroy: function () {this.$destroy () Document.body.removeChild (this.$el);}; / / omitted here.

Add global functionality to the component

There is an introduction to developing plug-ins in the official documentation of vue.js. The specific implementation code is as follows:

/ src/components/MessageBox/index.jsimport msgboxVue from'. / index.vue'; / / defines the install method of the plug-in object const MessageBox = {}; / / vue, which is used to define the vue plug-in MessageBox.install = function (Vue, options) {const MessageBoxInstance = Vue.extend (msgboxVue); let currentMsg, instance; const initInstance = () = > {/ / instantiated vue instance currentMsg = new MessageBoxInstance (); let msgBoxEl = currentMsg.$mount (). $el; document.body.appendChild (msgBoxEl);} / / add an instance method to the prototype of Vue to globally call Vue.prototype.$msgBox = {showMsgBox (options) {if (! instance) {initInstance ();} if (typeof options = 'string') {currentMsg.content = options;} else if (typeof options =' object') {Object.assign (currentMsg, options);} return currentMsg.showMsgBox ();}};}; export default MessageBox

Global use

/ / src/main.jsimport MessageBox from'. / components/MessageBox/index';Vue.use (MessageBox)

Page call

According to the previously defined method, the component can be called happily in each page.

This.$msgBox.showMsgBox ({title: 'add category', content: 'please fill in the category name', isShowInput: true}). Then (async (val) = > {/ /.}) .catch (() = > {/ /.})

Finally, let's take an effect picture.

This is the end of the introduction on "how to call MessageBox components globally in vue.js". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.