Vue.extend()实现弹窗组件

文中默认对vue/cli已经理解。 写该文章是版本为4.x

实现弹窗组件

在components文件中 新建一个notice文件夹 cd notice
新建一个Notice.vue

新建一个index.js文件 主要是组件实例的创建功能

import Vue from 'vue'
import Notice from './Notice.vue'
const NoticeController = Vue.extend(Notice)
function notice(options) {
    const nc = new NoticeController({
        propsData: options  // propsData 用于值得传递
    });
    nc.$mount();  // 挂载
    document.body.appendChild(nc.$el);  // 插入body当中
    nc.remove = function () {   //  该方法用于销毁实例
        document.body.removeChild(nc.$el);
        nc.$destroy()
    }
    console.log(nc);
    return nc;
}

export default notice

主要功能基本都实现
选择就是用于页面的实现的效果了

第一步 把组件实例注册全局中 main.js

import notice from './components/notice/index'
Vue.prototype.$notice = notice

第二步，创建一个用于实现弹窗的按钮 组件 XButton.vue

第三步，把这个按钮组件挂载某个页面上 比如说： home.vue

整一个弹窗的组件完成了，该弹窗组件是以element ui 中的弹窗组件 为原型实现的