vue.js开发实现全局调用的MessageBox组件实例代码

前言

一开始接触到vue中的组件的时候，对于组件的理解还是不够充分的，最近在开发个人博客项目中，一开始就没准备使用一些现在比较流行的UI库（毕竟是个人项目，多练练手还是好的），所以需要自己开发几个全局组件，这里以MessageBox为例记录下vue.js如何开发全局组件。所谓全局变量是针对vue实例下说的，即所有的vue实际都可以运用到这个组件，局部组件就是针对某个实例来说的，只有这个vue实例下才能发挥作用，下面话不多说了，来一看看详细的介绍吧。

源码

github地址：Talk is cheap. Show me the code.

本地下载地址：http://xiazai.freexyz.cn/201711/yuanma/vue-messagebox(freexyz.cn).rar

组件模板

// /src/components/MessageBox/index.vue
<template>
 <div class=\"message-box\" v-show=\"isShowMessageBox\">
  <div class=\"mask\" @click=\"cancel\"></div>
  <div class=\"message-content\">
  <svg class=\"icon\" aria-hidden=\"true\" @click=\"cancel\">
   <use xlink:href=\"#icon-delete\" rel=\"external nofollow\" ></use>
  </svg>
   <h3 class=\"title\">{{ title }}</h3>
   <p class=\"content\">{{ content }}</p>
  <div>
   <input type=\"text\" v-model=\"inputValue\" v-if=\"isShowInput\" ref=\"input\">
  </div>
   <div class=\"btn-group\">
    <button class=\"btn-default\" @click=\"cancel\" v-show=\"isShowCancelBtn\">{{ cancelBtnText }}</button>
    <button class=\"btn-primary btn-confirm\" @click=\"confirm\" v-show=\"isShowConfimrBtn\">{{ confirmBtnText }}</button>
   </div>
  </div>
 </div>
 </template>
 
 <script>
 export default {
  props: {
  title: {
   type: String,
   default: \'标题\'
  },
  content: {
   type: String,
   default: \'这是弹框内容\'
  },
  isShowInput: false,
  inputValue: \'\',
  isShowCancelBtn: {
   type: Boolean,
   default: true
  },
  isShowConfimrBtn: {
   type: Boolean,
   default: true
  },
  cancelBtnText: {
   type: String,
   default: \'取消\'
  },
  confirmBtnText: {
   type: String,
   default: \'确定\'
  }
  },
  data () {
  return {
   isShowMessageBox: false,
   resolve: \'\',
   reject: \'\',
   promise: \'\' // 保存promise对象
  };
  },
  methods: {
  // 确定,将promise断定为resolve状态
  confirm: function () {
   this.isShowMessageBox = false;
   if (this.isShowInput) {
   this.resolve(this.inputValue);
   } else {
   this.resolve(\'confirm\');
   }
   this.remove();
  },
  // 取消,将promise断定为reject状态
  cancel: function () {
   this.isShowMessageBox = false;
   this.reject(\'cancel\');
   this.remove();
  },
  // 弹出messageBox,并创建promise对象
  showMsgBox: function () {
   this.isShowMessageBox = true;
   this.promise = new Promise((resolve, reject) => {
   this.resolve = resolve;
   this.reject = reject;
   });
   // 返回promise对象
   return this.promise;
  },
  remove: function () {
   setTimeout(() => {
   this.destroy();
   }, 300);
  },
  destroy: function () {
   this.$destroy();
   document.body.removeChild(this.$el);
  }
  }
 };
 </script>
 <style lang=\"scss\" scoped>
 // 此处省略 ...
 </style>

给组件添加全局功能

vue.js官方文档中有开发插件的介绍。具体实现代码如下：

// /src/components/MessageBox/index.js

import msgboxVue from \'./index.vue\'; 
// 定义插件对象
const MessageBox = {};
// vue的install方法，用于定义vue插件
MessageBox.install = function (Vue, options) {
 const MessageBoxInstance = Vue.extend(msgboxVue);
 let currentMsg, instance;
 const initInstance = () => {
 // 实例化vue实例
 currentMsg = new MessageBoxInstance();
 let msgBoxEl = currentMsg.$mount().$el;
 document.body.appendChild(msgBoxEl);
 };
 // 在Vue的原型上添加实例方法，以全局调用
 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;

全局使用

// src/main.js
import MessageBox from \'./components/MessageBox/index\';
Vue.use(MessageBox);

页面调用

按照之前定义好的方法，可以在各个页面中愉快的调用该组件了。

this.$msgBox.showMsgBox({
 title: \'添加分类\',
 content: \'请填写分类名称\',
 isShowInput: true
}).then(async (val) => {
 // ...  
}).catch(() => {
 // ...
}); 

最后来张效果图

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。