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>

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

import Alert from '@/components/alert/index'Vue.use(Alert)

this.$alert({msg: '欢迎━(*｀∀´*)ノ亻!'})

<template> <b-modal  v-if="!destroy"  v-model="isShow"  title="温馨提示"  @change="modalChange"  @show="modalShow"  @shown="modalShown"  @hide="modalHide"  @hidden="modalHidden"  @ok="modalOk"  @cancel="modalCancel"  :centered="true"  :hide-header-close="hideHeaderClose"  :no-close-on-backdrop="noCloseOnBackdrop"  :no-close-on-esc="noCloseOnEsc"  :cancel-title="cancelTitle"  :ok-title="okTitle">   <p class="my-4">{{msg}}</p> </b-modal></template><script>export default { /**  * 参考: https://bootstrap-vue.js.org/docs/components/modal  * @param {boolean} isShow 是否显示modal框  * @param {string|number} msg 展示内容  * @param {boolean} hideHeaderClose 是否展示右上角关闭按钮 默认展示  * @param {string} cancelTitle 取消按钮文字  * @param {string} okTitle 确定按钮文字  * @param {boolean} noCloseOnBackdrop 能否通过点击外部区域关闭弹框  * @param {boolean} noCloseOnEsc 能否通过键盘Esc按键关闭弹框  * @param {function} change 事件触发顺序： show -> change -> shown -> cancel | ok -> hide -> change -> hidden  * @param {function} show before modal is shown  * @param {function} shown modal is shown  * @param {function} hide before modal has hidden  * @param {function} hidden after modal is hidden  * @param {function} ok 点击'确定'按钮  * @param {function} cancel 点击'取消'按钮  * @param {Boolean} destroy 组件是否销毁 在官方并没有找到手动销毁组件的方法，只能通过v-if来实现  */ props: {  isShow: {   type: Boolean,   default: true  },  msg: {   type: [String, Number],   default: ''  },  hideHeaderClose: {   type: Boolean,   default: false  },  cancelTitle: {   type: String,   default: '取消'  },  okTitle: {   type: String,   default: '确定'  },  noCloseOnBackdrop: {   type: Boolean,   default: true  },  noCloseOnEsc: {   type: Boolean,   default: true  },  change: {   type: Function,   default: null  },  show: {   type: Function,   default: null  },  shown: {   type: Function,   default: null  },  hide: {   type: Function,   default: null  },  hidden: {   type: Function,   default: null  },  ok: {   type: Function,   default: null  },  cancel: {   type: Function,   default: null  },  destroy: {   type: Boolean,   default: false  } }, methods: {  modalChange () {   if (this.change) this.change()  },  modalShow () {   if (this.show) this.show()  },  modalShown () {   if (this.shown) this.shown()  },  modalHide () {   if (this.hide) this.hide()  },  modalHidden () {   if (this.hidden) this.hidden()   this.destroy = true  },  modalOk () {   if (this.ok) this.ok()  },  modalCancel () {   if (this.cancel) this.cancel()  } }}</script>

import Confirm from './main.vue'import Vue from 'vue'let ConfirmConstructor = Vue.extend(Confirm)let instancelet seed = 1let index = 1000const install = () => { Object.defineProperty(Vue.prototype, '$confirm', {  get () {   let id = 'message_' + seed++   const confirmMsg = options => {    instance = new ConfirmConstructor({     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 confirmMsg  } })}export default install