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 弹出框关闭,手动及自动关闭都会触发
  */
 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

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

(0)

相关推荐

  • 深入理解Vue生命周期、手动挂载及挂载子组件

    本文介绍了Vue生命周期和手动挂载,分享给大家,具体如下: 1.vue的生命周期: 2.$mount()手动挂载 当Vue实例没有el属性时,则该实例尚没有挂载到某个dom中: 假如需要延迟挂载,可以在之后手动调用vm.$mount()方法来挂载. 例如: 方法一: <div id="app"> {{name}} </div> <button onclick="test()">挂载</button> <scrip

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

    在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert.modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用,那么问题来了,如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢. 以bootstrap-vue中的Alert组件为例,分一下几步进行: 1.定义一个vue文件实现对原组件的再次封装 main.vue <template> &

  • vue组件中使用iframe元素的示例代码

    本文介绍了vue组件中使用iframe元素的示例代码,分享给大家,具体如下: 需要在本页面中展示vue组件中的超链接,地址栏不改变的方法: <template> <div class="accept-container"> <div class="go-back" v-show="goBackState" @click="goBack">GoBack</div> <ul&g

  • Vue组件封装上传图片和视频的示例代码

    首先下载依赖: cnpm i -S vue-uuid ali-oss 图片和视频字段都是数组类型,保证可以上传多个文件. UploadImageVideo: <!--UploadImageVideo 分片上传 --> <template> <div class="UploadImageVideo"> <el-upload action :on-change="handleChange" :on-remove="ha

  • vue全局挂载实现APP全局弹窗的示例代码

    目录 需求背景 需求分析 代码展示 需求背景 app端对接网页端的客服系统,在用户实现网页客户系统发起询问时,app不论在哪个页面都需要弹窗提示 需求分析 这个需求分为两步,一个是负责双向实时通信,一个是全局显示.双向实时通信我们可以利用socket来实现,具体内容不展开(后续看情况再出一篇),本文主要讲全局显示. 代码展示 首先是写个弹窗组件,这里给出个demo.如下 <template> <view class="transferPopup-wrap" style

  • 在Vue组件中获取全局的点击事件方法

    使用场景: 在Vue组件中点击某元素之外的地方移除该元素 需求: 如上图所示,"用户列表"页面有三个Vue组件组成,分别是"菜单组件","导航组件"和"列表组件".其中"列表组件"中包含一个"下拉菜单",当我们点击"下拉菜单"以外的区域隐藏下拉菜单. 解决方法一: 出现"下拉菜单"的同时,建一个透明的遮罩层,然后只有"下拉菜单"

  • vue组件定义,全局、局部组件,配合模板及动态组件功能示例

    本文实例讲述了vue组件定义,全局.局部组件,配合模板及动态组件功能.分享给大家供大家参考,具体如下: 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa); *组件里面放数据: data必须是函数的形式,函数必须返回一个对象(json) 2. 局部组件 放到某个组件内部 var vm=new Vue({ el:'#box', data

  • 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件

    简介 Vue.use( plugin ):安装 Vue.js 插件.如果插件是一个对象,必须提供 install 方法.如果插件是一个函数,它会被作为 install 方法.install 方法将被作为 Vue 的参数调用. 当 install 方法被同一个插件多次调用,插件将只会被安装一次. Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: MyPlugin.install = function (Vue, op

  • html中创建并调用vue组件的几种方法汇总

    作者:Echoyya 出处:https://www.cnblogs.com/echoyya/ 最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组件的经验,所以借此机会学习总结一下. 方法一:Vue.extend( options ) 用法:使用基础 Vue 构造器,创建一个"子类".参数是一个包含组件选项的对象.data 选项是特例,需要

  • Vue组件实现景深卡片轮播示例

    目录 前言 需求拆解 开发思路(vue2) 开发过程 后记 前言 朋友的朋友做了个首页,首页用到一个卡片轮播,大概就是这个样子的: 第一版他们是开发出来了,但是各种bug,希望我帮忙改一下. 看完代码以后,发现他们整合了一个缝合怪出来,各个楼层都是从其他地方 CV 过来的,而且各个楼层引用了 n 多个js 和 css 文件,看了一下效果以后,觉得改他的东西确实比重新开发一个要麻烦的多得多,所以就重新写了一下. 在此记录一下,以便于后续复用. 需求拆解 初始化渲染5个容器,用来承载图片和标题,按照

  • vue 2.0 购物车小球抛物线的示例代码

    本文介绍了vue 2.0 购物车小球抛物线的示例代码,分享给大家,具体如下: 备注:此项目模仿 饿了吗.我用的是最新的Vue, 视频上的一些写法已经被废弃了. 布局代码 <div class="ball-container"> <transition name="drop" v-for="ball in balls" @before-enter="beforeDrop" @enter="droppi

随机推荐