欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-02 19:49:16
在最近的项目中,使用了来开发,然而在实际的开发过程中却发现这个ui提供的组件并不能打到我们预期的效果,像alert、modal等组件每个页面引入就得重复引入,并不像elem...

在最近的项目中,使用了来开发,然而在实际的开发过程中却发现这个ui提供的组件并不能打到我们预期的效果,像alert、modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用,那么问题来了,如何通过this.$xxx来调用起我们定义的组件或对我们所使用的ui框架的组件呢。
以中的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

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