uniapp vue3 如何使用uni_popup

UniApp 的 Vue3 中，`uni-popup` 是 UniApp UI 组件库中用于弹出窗口的功能组件。使用它可以在 Vue 项目中创建各种类型的弹框，如提示信息、警告确认、选择列表等。以下是基本的使用步骤：

1. 首先，在你的 Vue 文件中引入 `uni-popup` 组件：

   import { uniPopup } from '@dcloudio/uni-app/dist/compilers/uni-template/components.uni-popup/index'

2. 在模板 (`<template>` 标签内) 或者一个计算属性中，你可以使用它：

   <button @click="showPopup">点击显示弹窗</button>
   <template #popup-template>
     <!-- 弹窗内容 -->
     <view>{{ popupContent }}</view>
   </template>

   <script setup>
   const showPopup = async () => {
     // 创建并打开弹窗
     await uniPopup({
       view: 'popup-template', // 引用你在 template 中定义的节点
       position: 'bottom-center', // 定位，可以设置为 top、bottom、left、right 或 center
       type: 'confirm', // 类型，比如 confirm、alert、list 等，默认是 alert
       title: '提示信息', // 标题
       content: '这是一条消息', // 内容
       success: (res) => { // 成功回调
         if (res.confirm) {
           console.log('用户点击了确定');
         }
       },
     });
   };

   let popupContent = '这是弹窗的内容';
   </script>

3. 在上面的例子中，当用户点击按钮时，会触发 `showPopup` 函数，弹出一个带有标题和自定义内容的确认弹窗。如果用户点击确定，`success` 回调会被触发。