前几天有给大家分享一个vue2弹框组件，今天主要分享的是Vue3.0实现轻量级移动端自定义弹出框组件V3Popup。
V3Popup 一款基于vue3.0开发的移动端自定义弹出层组件。
内置20+种参数配置、7+弹窗类型、6+弹窗动画
支持 msg、dialog、modal、actionSheet、toast、android/ios 等弹窗类型。
并且在功能效果及UI上和之前的vue2保持一致。
在main.js中引入v3popup组件。
import { createApp } from 'vue'
import App from './App.vue'
// 引入弹窗组件v3popup
import V3Popup from './components/v3popup'
createApp(App).use(V3Popup).mount('#app')
支持组件式和函数式两种灵活调用方式。
函数式写法如下：
let $el = this.$v3popup({
title: '标题',
content: '这里是内容信息！',
type: 'android',
shadeClose: false,
xclose: true,
btns: [
{text: '取消', click: () => { $el.close(); }},
{text: '确认', style: 'color:#f90;', click: () => handleOK},
],
onSuccess: () => {},
onEnd: () => {}
})
在vue3.0中提供了两种可供全局调用的方法。app.config.globalProperties 和 app.provide
1、通过 app.config.globalProperties.$v3popup = V3Popup 这种方式挂载
// vue2.x中调用
methods: {
showDialog() {
this.$v3popup({...})
}
}
// vue3.x中调用
setup() {
// 获取上下文
const { ctx } = getCurrentInstance()
ctx.$v3popup({...})
}
2、通过 app.provide('v3popup', V3Popup)这种方式
// vue2.x中调用
methods: {
showDialog() {
this.v3popup({...})
}
}
// vue3.x中调用
setup() {
const v3popup = inject('v3popup')
const showDialog = () => {
v3popup({...})
}
return {
v3popup,
showDialog
}
}
在vue3中既可以通过vue2的optionAPI写法来实现，也可以通过setup来写。既然是vue3，就通过vue3语法写了。
上面就是vue3实现弹窗的模板及核心逻辑处理部分。
在vue3.0中可以通过 createApp 或 createVNode render 来实现函数式写法。将弹框实例挂载到body上面。
import { createApp } from 'vue'
import PopupConstructor from './popup.vue'
let $inst
// 创建挂载实例
let createMount = (opts) => {
const mountNode = document.createElement('div')
document.body.appendChild(mountNode)
const app = createApp(PopupConstructor, {
...opts, modelValue: true,
remove() {
app.unmount(mountNode)
document.body.removeChild(mountNode)
}
})
return app.mount(mountNode)
}
function V3Popup(options = {}) {
options.id = options.id || 'v3popup_' + generateId()
$inst = createMount(options)
return $inst
}
V3Popup.install = app => {
app.component('v3-popup', PopupConstructor)
// app.config.globalProperties.$v3popup = V3Popup
app.provide('v3popup', V3Popup)
}
okey，基于vue3.x开发自定义弹框组件就介绍这么多。感谢大家的阅读。
结语如果你觉得这篇内容对你有启发或帮助，那么可以帮我三个小忙：
- 转发/点赞，让更多的人也能看到这篇分享。
- 加关注、不迷路，不定期分享原创技术知识。
- 也看看其它历史文章。
