更新记录

0.0.3（2024-04-18）

基础功能初步完成

0.0.2（2024-04-17）

1、icon展示添加；2、按钮字体颜色配置；3、iOS测试

0.0.1（2024-04-10）

初次提交，简单实现了二次弹窗确认功能，目前只测了H5和安卓

平台兼容性

功能介绍

类似于uni.showModal一样使用的确认弹窗效果。

背景

平时使用确认弹窗的地方非常多，每个页面需要添加组件标签类似于 又很麻烦。uni.showModal使用很方便，但是实现弹窗效果各个系统APP和H5样式都不一样，有的手机上的效果，确认按钮在左边，取消按钮在右边，用户体验不好。 为了兼容APP和H5，提高用户体验。UI统一给了弹窗样式。又为了使用方便，决定自己封装一个适合vue3的全局弹窗。

实现思路

app:跳转一个新页面，页面背景设置为透明，类似于一个伪弹窗
H5: document里添加一个弹窗节点，写好样式。

兼容小程序

由于小程序没有开放根标签，使用vue-inset-loader进行全局注册，参考文档，没有小程序需求可以不使用该插件（待开发~）

使用方法

1. 在插件市场打开本插件页面，在右侧点击使用 HBuilderX 导入插件，选择要导入的项目点击确定（建议使用uni_modules版本 非uni_modules版本不在维护，有需要自行修改）

2. 在pages.json中添加页面路径。注意：一定不要设置为pages.json中第一项（在1.1.9版本新增弹出一个合并页面路由的pages.json修改界面。点击确认按钮即可完成插件页面向项目pages.json的注册。HBuilderX 3.5.0+支持，无需手动添加）

   "pages": [
       // ……其他页面配置
       // #ifdef APP-PLUS
       {
           "path": "uni_modules/vk-confirm/components/vk-confirm/vk-confirm",
           "style": {
               "app-plus": {
                   "animationDuration": 200,
                   "animationType": "fade-in",
                   "background": "transparent",
                   "backgroundColorTop": "transparent",
                   "popGesture": "none",
                   "scrollIndicator": false,
                   "titleNView": false
               },
               "disableScroll": true
           }
       },
       // #endif
   ]

3. 注册全局

   import {createSSRApp} from 'vue';
   import VKConfirm from '@/uni_modules/vk-confirm/components/vk-confirm/vk-confirm.js';
   const app = createSSRApp(App);
   app.use(VKConfirm);

   4.使用

   import {getCurrentInstance} from 'vue';
   const instance = getCurrentInstance()
   const ctx = instance?.appContext.config.globalProperties;
   
   ctx.$popup.show({
       title: '提交成功',
       content: '请等待平台确认ff',
       confirm: () => {
         console.log('confirm======')
       }
   })

   props

events

插件还有许多地方待完善，但是主要流程已经实现，有着急用的小伙伴，可以自己根据需要修改一下，我也会尽早完善的~