vue3弹出层V3Popup实例详解
Vue3-Popup 基于vue3构建的手机端自定义弹层组件。
一款集合了msg、alert、dialog、modal、actionSheet、toast等多种效果的Vue3自定义弹层组件。支持上下左右弹出、圆角、自定义弹层样式、多按钮及长按/右键功能。
引入v3popup
// 在main.js中全局引入 import { createApp } from 'vue' import App from './App.vue' // 引入弹窗组件v3popup import V3Popup from './components/v3popup' createApp(App).use(V3Popup).mount('#app')
调用方式支持标签式+函数式,根据项目需要选择合适的调用方法。
<!-- 提示框 --> <v3-popup v-model="showMsg" anim="fadeIn" content="msg提示框测试(3s后窗口关闭)" shadeClose="false" time="3" /> <!-- 询问框 --> <v3-popup v-model="showConfirm" shadeClose="false" title="标题" xclose z-index="2020" content="<div style='color:#1be769;padding:20px;'>确认框(这里是确认框提示信息,这里确认框提示信息,这里是确认框提示信息)</div>" :btns="[ {text: '取消', click: () => showConfirm=false}, {text: '确定', style: 'color:#f90;', click: handleInfo}, ]" />
// 函数式调用 let $el = this.$v3popup({ title: '标题', content: '<div style='color:#f90;padding:10px;'>这里是内容信息!</div>', type: 'android', shadeClose: false, xclose: true, btns: [ {text: '取消', click: () => { $el.close(); }}, {text: '确认', style: 'color:#f90;', click: () => handleOK}, ], onSuccess: () => {}, onEnd: () => {} })
vue3中可通过 和
两种方式挂载类似vue2中prototype原型链方法。
通过 方式挂载。
// vue2中调用 methods: { showDialog() { this.$v3popup({...}) } } // vue3中调用 setup() { // 获取上下文 const { ctx } = getCurrentInstance() ctx.$v3popup({...}) }
通过 方式挂载。
// vue2中调用 methods: { showDialog() { this.v3popup({...}) } } // vue3中调用 setup() { const v3popup = inject('v3popup') const showDialog = () => { v3popup({...}) } return { v3popup, showDialog } }
预览效果
v3popup参数配置
组件支持如下20+种参数灵活配置。
|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 层关闭回调事件
vpopop.vue模板核心代码
<template> <div ref="elRef" v-show="opened" class="vui__popup" :class="{'vui__popup-closed': closeCls}" :id="id"> <!-- //蒙层 --> <div v-if="JSON.parse(shade)" class="vui__overlay" @click="shadeClicked" :style="{opacity}"></div> <div class="vui__wrap"> <div class="vui__wrap-section"> <div class="vui__wrap-child" :class="['anim-'+anim, type&&'popupui__'+type, round&&'round', position]" :style="[popupStyle]"> <div v-if="title" class="vui__wrap-tit" v-html="title"></div> <div v-if="type=='toast'&&icon" class="vui__toast-icon" :class="['vui__toast-'+icon]" v-html="toastIcon[icon]"></div> <!-- 判断插槽是否存在 --> <template v-if="$slots.content"> <div class="vui__wrap-cnt"><slot name="content" /></div> </template> <template v-else> <div v-if="content" class="vui__wrap-cnt" v-html="content"></div> </template> <slot /> <div v-if="btns" class="vui__wrap-btns"> <span v-for="(btn, index) in btns" :key="index" class="btn" :style="btn.style" @click="btnClicked($event, index)" v-html="btn.text"></span> </div> <span v-if="xclose" class="vui__xclose" :class="xposition" :style="{'color': xcolor}" @click="close"></span> </div> </div> </div> </div> </template> /** * @Desc Vue3自定义弹出层组件V3Popup * @Time andy by 2020-12 * @About Q:282310962 wx:xy190310 */ <script> import { onMounted, ref, reactive, watch, toRefs, nextTick } from 'vue' let $index = 0, $locknum = 0, $timer = {} export default { props: { // 接收父组件v-model值,如果v-model:open,则这里需写open: {...} modelValue: { type: Boolean, default: false }, // 标识符,相同ID共享一个实例 id: { type: String, default: '' }, title: String, content: String, type: String, popupStyle: String, icon: String, shade: { type: [Boolean, String], default: true }, shadeClose: { type: [Boolean, String], default: true }, opacity: { type: [Number, String], default: '' }, round: Boolean, xclose: Boolean, xposition: { type: String, default: 'right' }, xcolor: { type: String, default: '#333' }, anim: { type: String, default: 'scaleIn' }, position: String, follow: { type: Array, default: null }, time: { type: [Number, String], default: 0 }, zIndex: { type: [Number, String], default: '8080' }, teleport: [String, Object], btns: { type: Array, default: null }, onSuccess: { type: Function, default: null }, onEnd: { type: Function, default: null }, }, emits: [ 'update:modelValue' ], setup(props, context) { const elRef = ref(null) const data = reactive({ opened: false, closeCls: '', toastIcon: { ... } }) onMounted(() => { ... }) // 监听弹层v-model watch(() => props.modelValue, (val) => { if(val) { open() }else { close() } }) // 打开弹层 const open = () => { if(data.opened) return data.opened = true typeof props.onSuccess === 'function' && props.onSuccess() const dom = elRef.value dom.style.zIndex = getZIndex() + 1 ... // 倒计时 if(props.time) { $index++ // 避免重复操作 if($timer[$index] !== null) clearTimeout($timer[$index]) $timer[$index] = setTimeout(() => { close() }, parseInt(props.time) * 1000) } // 长按|右键菜单 if(props.follow) { ... } } // 关闭弹层 const close = () => { if(!data.opened) return data.closeCls = true setTimeout(() => { ... context.emit('update:modelValue', false) typeof props.onEnd === 'function' && props.onEnd() }, 200) } // 点击遮罩层 const shadeClicked = () => { if(JSON.parse(props.shadeClose)) { close() } } // 按钮事件 const btnClicked = (e, index) => { let btn = props.btns[index]; if(!btn.disabled) { typeof btn.click === 'function' && btn.click(e) } } ... return { ...toRefs(data), elRef, close, shadeClicked, btnClicked, } } } </script>
vue2.x中通过Vue.extends扩展函数实例来实现挂载弹窗到body上。
vue3.x中则可以通过 和 来实现挂载到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) }
这样就可以实现函数式来调用组件了。
另外vue2.x中给v-model传值 this.$emit('input', false)
vue3中modelValue是默认的。 则是 context.emit('update:modelValue', false)
如果定义的是v-model:visible,则需要先在props: { visible: Boolean }中声明,然后context.emit('update:visible': false)
Ok,基于vue3.0开发自定义弹框组件就介绍到这里。感兴趣的可以动手去试试哈。💪🏻
到此这篇关于vue3弹出层V3Popup实例详解的文章就介绍到这了,更多相关vue3弹出层内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
Framework7 设置是否允许点击弹出框外部区域,关闭弹出层
下面我们来看一篇关于 Framework7 设置是否允许点击弹出框外部区域,关闭弹出层的使用例子,具体的细节步骤如下文介绍。 1,Framework7中三大类弹出框 (1)模态框(moda...2016-10-02- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 基于jquery实现点击链接弹出层效果,其基本实现原理是这样的:jquery操作DOM元素。对层样式的设置。将display:设置为none;让层隐藏;对jq点击弹出层相关知识感兴趣的朋友一起学习吧...2016-01-05
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
- 这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25
- 最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下...2023-01-17
- 当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17