2020-12-30

最新推荐文章于 2023-10-17 17:07:54 发布

wubaoyu123

最新推荐文章于 2023-10-17 17:07:54 发布

阅读量281

点赞数

原文链接：https://www.cnblogs.com/xiaoyan2017/p/14210820.html

版权

博客园Logo
首页
新闻
博问
专区
闪存
班级

代码改变世界
搜索
注册
登录
返回主页
web前端项目案例实战
交流分享前端(移动端|微信端|小程序)最新技术、知识、项目案例…
博客园首页新随笔联系订阅管理随笔 - 50 文章 - 0 评论 - 70
vue3系列：vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件
基于Vue3.0开发的轻量级手机端弹框组件V3Popup。

之前有分享一个vue2.x移动端弹框组件，今天给大家带来的是Vue3实现自定义弹框组件。

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同样支持标签式+函数式两种调用方式。

标签写法
复制代码
<v3-popup
v-model=“showDialog”
title=“标题”
content=“

这里是内容信息！

”
type=“android”
shadeClose=“false”
xclose
:btns="[
{text: ‘取消’, click: () => showDialog=false},
{text: ‘确认’, style: ‘color:#f90;’, click: handleOK},
]"
@success=“handleOpen”
@end=“handleClose”
/>
<template #content>这里是自定义插槽内容信息！

复制代码
函数写法
复制代码
let

e l = t h i s .

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.globalProperties app.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支持如下参数配置。

复制代码

复制代码
复制代码
/**

@Desc Vue3.0自定义弹框组件V3Popup
@Time andy by 2020-12
@About Q：282310962 wx：xy190310
*/

复制代码
Vue3中可通过 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)
}
复制代码
这样就实现了在vue3中注册原型链函数和v3-popup组件，就可以使用函数式调用了。

好了，基于Vue3开发自定义弹框组件就分享到这里。希望对大家有些帮助哈！💪

最后附上一个Next.js实例项目

Next+React.js桌面端聊天：https://www.cnblogs.com/xiaoyan2017/p/14195483.html

本文为博主原创文章，未经博主允许不得转载，欢迎大家一起交流 QQ（282310962） wx（xy190310）
分类: vue项目实例
标签: vue3.x模态框, vue3全局弹窗, vue3对话框, vue3.0自定义弹框, vue3自定义组件
好文要顶关注我收藏该文
xiaoyan2017
关注 - 0
粉丝 - 162
+加关注
0 0
« 上一篇： Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例
posted @ 2020-12-30 12:22 xiaoyan2017 阅读(41) 评论(0) 编辑收藏
刷新评论刷新页面返回顶部
登录后才能发表评论，立即登录或注册，访问网站首页
写给园友们的一封求助信
【推荐】News: 大型组态、工控、仿真、CADGIS 50万行VC++源码免费下载
【推荐】有你助力，更好为你——博客园用户消费观调查，附带小惊喜！
【推荐】博客园x丝芙兰-圣诞特别活动：圣诞选礼，美力送递
【推荐】了不起的开发者，挡不住的华为，园子里的品牌专区
【福利】AWS携手博客园为开发者送免费套餐+50元京东E卡
【推荐】未知数的距离，毫秒间的传递，声网与你实时互动
【推荐】新一代 NoSQL 数据库，Aerospike专区新鲜入驻

相关博文：
· VUE3
· vue3作业
· vue3——vue数据循环渲染
· Scrapy框架、Springboot框架、Flask框架、Django框架
· 框架
» 更多推荐…

最新 IT 新闻:
· 知乎到底比B站差哪了？
· 淘宝揭晓年度“丑东西”：羊毛毡买家秀“拔得头丑”
· 太空垃圾增多威胁地球安全？日本研发木制卫星
· 沈向洋：人工智能社区将创造更多工具释放人类创造力
· 业内首创！小米MIUI 12.5无障碍触感新功能发布
» 更多新闻…
公告

昵称： xiaoyan2017
园龄： 3年1个月
粉丝： 162
关注： 0
+加关注
搜索

找找看
常用链接

我的随笔
我的评论
我的参与
最新评论
我的标签
我的标签

react聊天室(2)
h5聊天(2)
vue聊天室(2)
h5仿微信聊天(2)
移动端弹窗(2)
react仿微信界面(2)
react客户端(1)
react聊天(1)
react聊天IM(1)
移动端旅行app(1)
更多
随笔分类

angular实战(1)
electron+vue(1)
Flutter实例(2)
H5项目实战(17)
HTML5+css3(20)
jQuery知识(2)
nuxt+vue实例(6)
react+redux实战案例(6)
react-native实战开发(1)
Taro实例(3)
uni-app实例(4)
vue项目实例(5)
小程序开发(4)
随笔档案

2020年12月(3)
2020年11月(2)
2020年10月(4)
2020年5月(1)
2020年4月(1)
2020年1月(1)
2019年12月(2)
2019年11月(2)
2019年10月(1)
2019年9月(3)
2019年8月(1)
2019年7月(1)
2019年6月(2)
2019年4月(2)
2019年1月(2)
更多
最新评论