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


Posted in Javascript onAugust 02, 2018

在最近的项目中,使用了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 instance
let seed = 1
let index = 2000
const 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下

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

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

4、使用

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

5、confrim的封装也是一样的

main.vue

<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>

index.js 

import Confirm from './main.vue'
import Vue from 'vue'
let ConfirmConstructor = Vue.extend(Confirm)
let instance
let seed = 1
let index = 1000
const 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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript preload&amp;lazy load
May 13 Javascript
收集json解析的四种方法分享
Jan 17 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jQuery链使用指南
Jan 20 Javascript
firefox浏览器用jquery.uploadify插件上传时报HTTP 302错误
Mar 01 Javascript
JavaScript中split() 使用方法汇总
Apr 17 Javascript
Javascript将JSON日期格式化
Aug 23 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
详解vue项目首页加载速度优化
Oct 18 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
el-select数据过多懒加载的解决(loadmore)
May 29 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 #Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 #Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 #Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 #Javascript
利用Blob进行文件上传的完整步骤
Aug 02 #Javascript
You might like
php $_ENV为空的原因分析
2009/06/01 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
新手入门常用代码集锦
2007/01/11 Javascript
js用图作提交按钮或超连接
2008/03/26 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
Javascript设计模式之观察者模式的多个实现版本实例
2015/03/03 Javascript
Jquery解析json字符串及json数组的方法
2015/05/29 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
js模拟微博发布消息
2017/02/23 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python中if elif else及缩进的使用简述
2018/05/31 Python
pytorch中tensor的合并与截取方法
2018/07/26 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
基于Django统计博客文章阅读量
2019/10/29 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
酒店员工职业生涯规划
2014/02/25 职场文书
委托书如何写
2014/08/30 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
学术会议邀请函
2015/01/30 职场文书
居住证明范文
2015/06/17 职场文书
CSS预处理框架——Stylus
2021/04/21 HTML / CSS
Vue接口封装的完整步骤记录
2021/05/14 Vue.js