三分钟学会Vue自定义插件-----实现一个alert/confirm插件

使用Vue开发的过程中，我们会在很多地方用到一些同样的功能，比如说提示弹窗，这种时候我们可以自定义一个插件，方便在多个地方使用。

项目目录结构：

• modules：放置模块的文件夹，里面有一个 alert 文件夹，用于存放 alert 插件 ；
• Alert.vue：就是我们要在多处用到提示弹窗组件；
• index.js：对于该自定义插件的一些配置；

代码编写：

• Alert.vue

• index.js

import AlertComponent from './Alert.vue';

const Alert = {}

// Vue暴露了一个install方法，用于自定义插件
Alert.install = function (Vue) {
  // 创建一个子类
  const AlertConstructor = Vue.extend(AlertComponent);
  // 实例化这个子类
  const instance = new AlertConstructor();
  // 创建一个div元素，并把实例挂载到div元素上
  instance.$mount(document.createElement('div'));
  // 将el插入到body元素中
  document.body.appendChild(instance.$el);

  // 添加实例方法
  // alert插件的实例方法：只接收提示信息msg
  Vue.prototype.$alert = msg => {
    instance.type = 'alert';
    instance.msg = msg;
    instance.isShow = true;
  };
  // confirm插件的实例方法，可以接收三个参数
  // msg：提示信息
  // success：点击确定执行的函数
  // cancel：点击取消执行的函数
  Vue.prototype.$confirm = (msg, success, cancel) => {
    instance.type = 'confirm';
    instance.msg = msg;
    instance.isShow = true;
    if(typeof success !== 'undefined') {
      instance.success = success;
    }
    if(typeof cancel !== 'undefined') {
      instance.cancel = cancel;
    }
  }
}

export default Alert;

至此，我们的自定义插件就差最后点睛一笔了，只需要使用 Vue.use 方法将插件安装进去即可。

• main.js

import Vue from 'vue'
import App from './App.vue'
import alert from './modules/alert'

Vue.config.productionTip = false
Vue.use(alert)  // 注意，Vue.use方法必须在new Vue之前被调用

new Vue({
  render: h => h(App),
}).$mount('#app')

使用方法：

使用起来很简单，以两个按钮来触发弹窗为例子。

• App.vue

• 页面效果

• 点击 alert 按钮

• 点击 confirm 按钮

• 点击确定按钮

• 点击取消按钮

 

这样就实现了一个简单的Vue自定义插件，我们在各个组件中可以很方便地去调用它们。