怎么把组件挂载到body上_vue组件挂载到全局方法的示例代码

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

以中的alert组件为例，分一下几步进行：

1、定义一个vue文件实现对原组件的再次封装

main.vue

class="alert-wrap pt-4 pb-4"

:show="isautoclose"

:variant="type" dismissible

:fade="true"

@dismiss-count-down="countdownchanged"

@dismissed="dismiss"

>

{{msg}}

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

}

}

}

}

.alert-wrap {

position: fixed;

width: 600px;

top: 80px;

left: 50%;

margin-left: -200px;

z-index: 2000;

font-size: 1.5rem;

}

这里主要就是对组件参数、回调事件的一些处理，与其他处理组件的情况没有什么区别

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

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

{{msg}}

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

}

}

}

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

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

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！