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 弹出框关闭,