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 克隆数组最简单的方法
Feb 12 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
Mar 28 Javascript
JavaScript中创建类/对象的几种方法总结
Nov 29 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
Javascript前端UI框架Kit使用指南之kitjs事件管理
Nov 28 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
Sep 08 Javascript
Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
Jun 12 Javascript
JS验证码实现代码
Sep 14 Javascript
对node.js中render和send的用法详解
May 14 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
js实现倒计时秒杀效果
Mar 25 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实现CSV文件的导入和导出类
2015/03/24 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
Javascript 作用域使用说明
2009/08/13 Javascript
js将iframe中控件的值传到主页面控件中的实现方法
2013/03/11 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
javascript中的五种基本数据类型
2015/08/26 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Vue2.0使用过程常见的一些问题总结学习
2017/04/10 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
python实现的二叉树定义与遍历算法实例
2017/06/30 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python 实现在一张图中绘制一个小的子图方法
2019/07/07 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Python通过Manager方式实现多个无关联进程共享数据的实现
2019/11/07 Python
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
新年福利来一波之Python轻松集齐五福(demo)
2020/01/20 Python
使用Python爬虫库requests发送请求、传递URL参数、定制headers
2020/01/25 Python
PyTorch中model.zero_grad()和optimizer.zero_grad()用法
2020/06/24 Python
英国国家美术馆商店:National Gallery
2019/05/01 全球购物
.net面试题
2016/09/17 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
最新销售员个人自荐信
2013/09/21 职场文书
生物科学专业个人求职信范文
2013/12/07 职场文书
大型活动组织方案
2014/05/10 职场文书
我的中国梦口号
2014/06/16 职场文书
举起手来观后感
2015/06/09 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL