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

原创 Fly丶 教程 vue专题 133阅读 2018-12-31 20:49:54 举报

在最近的项目中,使用了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

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

3、最后需要在main.js中use一下

4、使用

5、confrim的封装也是一样的

main.vue

index.js

最后

为了帮助大家让学习变得轻松、高效,给大家免费分享一大批资料,帮助大家在成为全栈工程师,乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈:866109386.欢迎大家进群交流讨论,学习交流,共同进步。

当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们,祝福大家在往后的工作与面试中一切顺利。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复