Vue3-Popup
，一款基于Vue3.0的移动端自定义弹窗组件，介绍基于Vue3.0开发的移动端弹窗组件V3Popup。在开发设计之初，借鉴了Vant3和Antdv2.0中弹框组件化的思想。支持20+参数灵活配置。importcomponents//在main.js中全局引入import{createApp}from'vue'importAppfrom'./App.vue'//引入弹窗组件v3popupimportV3Popupfrom'./components/v3popup'createApp(App).use(V3Popup).mount('#app')遵循极简调用方式，支持组件和函数调用。组件确认框（这里是确认框提示信息，这里是确认框提示信息，这里是确认框提示信息）
":btns="[{text:'取消',click:()=>showConfirm=false},{text:'OK',style:'color:#f90;',click:handleInfo},]"/>Functionallet$el=this.$v3popup({title:'Title',content:'
这里是内容信息！ ',type:'android',shadeClose:false,xclose:true,btns:[{text:'Cancel',click:()=>{$el.close();}},{text:'Confirm',style:'color:#f90;',click:()=>handleOK},],onSuccess:()=>{},onEnd:()=>{}})在vue2中，可以挂载全局方法通过原型原型链。如果vue3挂载了全局方法呢？其实vue3提供了两种方式来挂载全局方法。和两种方式。1.调用app.config.globalProperties.$v3popup=V3Popup//vue2:{showDialog(){this.$v3popup({...})}}//调用vue3中的setup(){//getContextconst{ctx}=getCurrentInstance()ctx.$v3popup({...})}2.通过app.provide('v3popup',V3Popup)调用vue2中的方法:{showDialog(){this.v3popup({...})}}//在vue3中调用setup(){constv3popup=inject('v3popup')constshowDialog=()=>{v3popup({...})}return{v3popup,showDialog}}但是，vue作者推荐第二种挂载方式。预览图参数配置v3popup支持以下参数混合匹配。|props参数|v-model是否显示弹出框标题titlecontent内容（支持String、taggedcontent、自定义slot内容）***如果content内容比较复杂，建议使用tag式写法type弹窗类型(toast|footer|actionsheet|actionsheetPicker|android|ios)popupStyle自定义弹窗样式图标toasticon(loading|success|fail)shade是否显示遮罩层shadeClose是否关闭弹窗opacitymasklayertransparencyround是否显示圆角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弹出按钮（参数：文本|样式|禁用|点击）++++++++++++++++++++++++++++++++++++++++++++++++|emit事件触发|成功层弹出后回调(@success="xxx")结束层销毁后回调(@end="xxx")+++++++++++++++++++++++++++++++++++++++++++++++++|eventevent|onSuccess层打开回调事件onEnd层关闭回调事件
