uniapp vue3 uni-popup

UniPopup 是一个基于 Vue 3 和 Uni-app 的弹窗组件。它提供了丰富的配置选项，可以方便地创建各种类型的弹窗，包括提示框、确认框、加载中等。使用 UniPopup，你可以在 Uni-app 中快速构建出弹窗功能，并且可以灵活地定制样式和行为。

要使用 UniPopup，首先需要安装相关的依赖。你可以在项目根目录下打开终端，运行以下命令进行安装：

npm install uni-popup

安装完成后，在你的页面组件中引入 UniPopup：

import { ref } from 'vue';
import { usePopup } from 'uni-popup';

export default {
  setup() {
    const popup = usePopup();
    return {
      popup,
    };
  },
};

然后，你可以在模板中使用 `popup` 对象来创建弹窗：

<template>
  <div>
    <button @click="popup.open('Hello world')">打开弹窗</button>
    <uni-popup v-model="popup.isVisible">
      {{ popup.message }}
      <button @click="popup.close">关闭</button>
    </uni-popup>
  </div>
</template>

在上面的示例中，当点击按钮时，会通过 `popup.open` 方法打开弹窗，并将消息内容传递给弹窗组件。弹窗组件会根据传递的内容来显示相应的弹窗内容。点击弹窗中的关闭按钮，会通过 `popup.close` 方法关闭弹窗。

这只是 UniPopup 的基本用法，你可以根据需要进行进一步的配置和样式定制。具体的使用方法和配置选项可以参考 UniPopup 的文档。希望对你有帮助！