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

2023-09-09 12:41:04 52

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

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

main.vue




.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

importAlertfrom'./main.vue'
importVuefrom'vue'
letAlertConstructor=Vue.extend(Alert)
letinstance
letseed=1
letindex=2000
constinstall=()=>{
Object.defineProperty(Vue.prototype,'$alert',{
get(){
letid='message_'+seed++
constalertMsg=options=>{
instance=newAlertConstructor({
propsData:options
})
index++
instance.id=id
instance.vm=instance.$mount()
document.body.appendChild(instance.vm.$el)
instance.vm.$el.style.zIndex=index
returninstance.vm
}
returnalertMsg
}
})
}
exportdefaultinstall

其主要思想是通过调用这个方法给组件传值，然后append到body下

3、最后需要在main.js中use一下

importAlertfrom'@/components/alert/index'
Vue.use(Alert)

4、使用

this.$alert({msg:'欢迎━(*｀∀´*)ノ亻!'})

5、confrim的封装也是一样的

main.vue

index.js

importConfirmfrom'./main.vue'
importVuefrom'vue'
letConfirmConstructor=Vue.extend(Confirm)
letinstance
letseed=1
letindex=1000
constinstall=()=>{
Object.defineProperty(Vue.prototype,'$confirm',{
get(){
letid='message_'+seed++
constconfirmMsg=options=>{
instance=newConfirmConstructor({
propsData:options
})
index++
instance.id=id
instance.vm=instance.$mount()
document.body.appendChild(instance.vm.$el)
instance.vm.$el.style.zIndex=index
returninstance.vm
}
returnconfirmMsg
}
})
}
exportdefaultinstall

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐