vue自定义全局组件实现弹框案例

本文实例为大家分享了vue自定义全局组件实现弹框案例的具体代码，供大家参考，具体内容如下

说明：本案例是封装的一个弹框页面，因为只想要一个遮罩，内容自定义。因为ElementUI上已经提供了一个弹框组件，但觉得elementUI的组件内容有点多，所有自己就封装了全局组件。自己封装的参考了elementUI组件的源码。

主要步骤如下

1.创建一个文件夹my-dialog
2.在my-dialog文件夹下创建MyDialog.vue和index.js
3.index.js需要引入MyDiloag并封装和抛出
4.在main.js中引入index.js

主要代码如下

1、MyDialog.vue

2、index.js

import MyDialog from './MyDialog';

MyDialog.install = function(Vue) {
    Vue.component(MyDialog.name, MyDialog);
};

export default MyDialog;

3、在main.js中引入

// 引入自定义弹框组件
import MyDialog from '@/common/my-dialog/index'
Vue.use(MyDialog)

4、在项目中使用

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。