2021-03-20 VUE封装全局提示框（移动端）在js内引用公共组件

效果图：

效果图

放代码：

组件文件路径：components/message/index.vue

组件文件路径：components/message/message.js

import MessageComponent from './index.vue';

const Message = {};

Message.install = function (Vue) {
    const MessageConstructor = Vue.extend(MessageComponent);
    const instance = new MessageConstructor();

    instance.$mount(document.createElement('div'));
    document.body.appendChild(instance.$el);
  
    let timer;
  
    const MsgMain = {
        show_message(txt, type) {
            clearInterval(timer);
            timer = setTimeout(() => {
                instance.visible = false;
            }, 1500);
            instance.txt = txt;
            instance.type = type;
            instance.visible = true;
        },
        success(txt, type = 'success') {
            this.show_message(txt, type);
        },
        fail(txt, type = 'fail') {
            this.show_message(txt, type);
        },
        warning(txt, type = 'warning') {
            this.show_message(txt, type);
        }
    }

    Vue.prototype.$message = MsgMain;
};

export default Message;

main文件路径：main.js

import message from './components/Message/message';

Vue.use(message); // 全局提示框

调用组件文件路径：index.vue