介绍
V3Popup 一款基于vue3.0开发手机端弹出框组件。在开发设计之初参考借鉴了Vant3及Antdv2.0中弹框组件化思想。支持超过20+种参数灵活配置。
引入组件
// 在main.js中全局引入
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: () => {}
})vue2中可以通过prototype原型链挂载全局方法。vue3如果挂载全局方法呢？
其实vue3中提供了两种方式来挂载全局方法。
两种方式。
1、通过app.config.globalProperties.$v3popup = V3Popup
// vue2中调用
methods: {
showDialog() {
this.$v3popup({...})
}
}
// vue3中调用
setup() {
// 获取上下文
const { ctx } = getCurrentInstance()
ctx.$v3popup({...})
}2、通过app.provide('v3popup', V3Popup)
// vue2中调用
methods: {
showDialog() {
this.v3popup({...})
}
}
// vue3中调用
setup() {
const v3popup = inject('v3popup')
const showDialog = () => {
v3popup({...})
}
return {
v3popup,
showDialog
}
}不过vue作者更推荐第二种方式挂载方法。
预览图
参数配置
v3popup支持如下参数混合搭配使用。
|props参数|
v-model 是否显示弹框
title 标题
content 内容（支持String、带标签内容、自定义插槽内容）***如果content内容比较复杂，推荐使用标签式写法
type 弹窗类型（toast | footer | actionsheet | actionsheetPicker | android | ios）
popupStyle 自定义弹窗样式
icon toast图标（loading | success | fail）
shade 是否显示遮罩层
shadeClose 是否点击遮罩时关闭弹窗
opacity 遮罩层透明度
round 是否显示圆角
xclose 是否显示关闭图标
xposition 关闭图标位置（left | right | top | bottom）
xcolor 关闭图标颜色
anim 弹窗动画（scaleIn | fadeIn | footer | fadeInUp | fadeInDown）
position 弹出位置（top | right | bottom | left）
follow 长按/右键弹窗（坐标点）
time 弹窗自动关闭秒数（1、2、3）
zIndex 弹窗层叠（默认8080）
teleport 指定挂载节点（默认是挂载组件标签位置，可通过teleport自定义挂载位置） teleport="body | #xxx | .xxx"
btns 弹窗按钮（参数：text|style|disabled|click）
++++++++++++++++++++++++++++++++++++++++++++++
|emit事件触发|
success 层弹出后回调（@success="xxx"）
end 层销毁后回调（@end="xxx"）
++++++++++++++++++++++++++++++++++++++++++++++
|event事件|
onSuccess 层打开回调事件
onEnd 层关闭回调事件
vue3中如何把弹框实例挂载到body上呢？其实可通过createApp或createVNode实现。createApp第一个参数传入组件模板，第二个参数传入自定义参数即可。
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开发自定义弹出层组件就分享到这里。希望能喜欢~✍