V3Popup 基于vue3.x实现的移动端弹出框组件，集合msg、alert、dialog、modal、actionSheet、toast等多种效果。支持20+种自定义参数配置，旨在通过极简的布局、精简的调用方式解决多样化的弹框场景。

v3popup 在开发之初参考借鉴了Vant3、ElementPlus等组件化思想。并且功能效果和之前vue2.0保持一致。

◆ 快速引入

在main.js中全局引入v3popup组件。

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 引入弹窗组件v3popup
import V3Popup from './components/v3popup'

app.use(V3Popup)
app.mount('#app')

v3popup同样支持标签式+函数式两种调用方式。

标签写法

  这里是自定义插槽内容信息！

函数写法

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中挂载全局函数有2种方式app.config.globalPropertiesapp.provide

通过 app.config.globalProperties.$v3popup = V3Popup 方式挂载。

// vue2.x中调用
methods: {
  showDialog() {
    this.$v3popup({...})
  }
}

// vue3.x中调用
setup() {
  // 获取上下文
  const { ctx } = getCurrentInstance()
  ctx.$v3popup({...})
}

通过 app.provide('v3popup', V3Popup) 方式挂载。

// vue2.x中调用
methods: {
  showDialog() {
    this.v3popup({...})
  }
}

// vue3.x中调用
setup() {
  const v3popup = inject('v3popup')
  
  const showDialog = () => {
    v3popup({...})
  }

  return {
    v3popup,
    showDialog
  }
}

不过vue.js作者是推荐使用 provide inject 方式来挂载原型链函数。

◆ 效果预览

◆ 参数配置

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      层关闭回调事件

v3popup.vue模板