vue组件挂载到全局方法的示例代码

在最近的项目中，使用了bootstrap-vue来开发，然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果，像alert、modal等组件每个页面引入就得重复引入，并不像element那样可以通过this.$xxx来调用，那么问题来了，如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。
以bootstrap-vue中的Alert组件为例，分一下几步进行：

1、定义一个vue文件实现对原组件的再次封装

main.vue

<template> <b-alert  class="alert-wrap pt-4 pb-4"  :show="isAutoClose"  :variant="type" dismissible  :fade="true"  @dismiss-count-down="countDownChanged"  @dismissed="dismiss"  >   {{msg}}  </b-alert></template><script>export default { /**  * 参考: https://bootstrap-vue.js.org/docs/components/alert  * @param {string|number} msg 弹框内容  * @param {tstring} type 弹出框类型 对应bootstrap-vue中variant 可选值有：'primary'、'secondary'、'success'、'danger'、'warning'、'info'、'light'、'dark'默认值为 'info'  * @param {boolean} autoClose 是否自动关闭弹出框  * @param {number} duration 弹出框存在时间(单位：秒)  * @param {function} closed 弹出框关闭，手动及自动关闭都会触发  */ props: {  msg: {   type: [String, Number],   default: ''  },  type: {   type: String,   default: 'info'  },  autoClose: {   type: Boolean,   default: true  },  duration: {   type: Number,   default: 3  },  closed: {   type: Function,   default: null  } }, methods: {  dismiss () {   this.duration = 0  },  countDownChanged (duration) {   this.duration = duration  } }, computed: {  isAutoClose () {   if (this.autoClose) {    return this.duration   } else {    return true   }  } }, watch: {  duration () {   if (this.duration === 0) {    if (this.closed) this.closed()   }  } }}</script><style scoped>.alert-wrap { position: fixed; width: 600px; top: 80px; left: 50%; margin-left: -200px; z-index: 2000; font-size: 1.5rem;}</style>

这里主要就是对组件参数、回调事件的一些处理，与其他处理组件的情况没有什么区别

2、定义一个js文件挂载到Vue上，并和我们定义的组件进行交互

index.js

import Alert from './main.vue'import Vue from 'vue'let AlertConstructor = Vue.extend(Alert)let instancelet seed = 1let index = 2000const install = () => { Object.defineProperty(Vue.prototype, '$alert', {  get () {   let id = 'message_' + seed++   const alertMsg = options => {    instance = new AlertConstructor({     propsData: options    })    index++    instance.id = id    instance.vm = instance.$mount()    document.body.appendChild(instance.vm.$el)    instance.vm.$el.style.zIndex = index    return instance.vm   }   return alertMsg  } })}export default install

其主要思想是通过调用这个方法给组件传值，然后append到body下