vue组件挂载到全局方法的示例代码
来源:
中文源码网 浏览:247 次 日期:2024-04-30 21:08:38
【下载文档: vue组件挂载到全局方法的示例代码.txt 】
vue组件挂载到全局方法的示例代码
在最近的项目中,使用了bootstrap-vue来开发,然而在实际的开发过程中却发现这个UI提供的组件并不能打到我们预期的效果,像alert、modal等组件每个页面引入就得重复引入,并不像element那样可以通过this.$xxx来调用,那么问题来了,如何通过this.$xxx来调用起我们定义的组件或对我们所使用的UI框架的组件呢。
以bootstrap-vue中的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}}
这里主要就是对组件参数、回调事件的一些处理,与其他处理组件的情况没有什么区别
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}}
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
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持中文源码网。