更新记录

1.0.1（2026-10-13） 下载此版本

1111

1.0.0（2026-10-13） 下载此版本

新增

• 首次发布
• 通用弹窗组件：mode='dialog' 居中对话 / mode='popup' 边侧弹出
• 内建动作按钮：取消/确认 + 文本/颜色/异步 confirmLoading
• 三种内容渲染：content 文本属性 / 默认插槽 / #header+#footer 插槽
• 行为细粒度控制：maskClosable / closeOnConfirm / closeOnCancel / reverseActions
• 五个弹出位置：top / bottom / left / right / center
• 通过 v-model:visible 双向绑定显隐
• 暴露 open / close 方法（Vue3 版 defineExpose）

平台兼容性

uni-app(5.0)

ry-modal 通用弹窗组件

作者：Howe

通用弹窗组件：mode='dialog' 走居中对话（标题+内容+按钮），mode='popup' 走边侧弹出（top/bottom/left/right/center）。内建动作按钮、异步 confirm、多插槽，一套 API 覆盖弹窗 + 对话 + 抽屉三场景。

平台支持

需要 uni-app x（uvue）版本请使用 ry-modal-x 插件。

安装

三种方式任选其一。

方式一：源码放到 components 目录（推荐）

下载源码后，把组件放到项目的 components/ry-modal/ry-modal.vue，保持该目录结构，即符合 easycom 默认规则，Vue2 / Vue3 均自动注册，无需任何配置。

页面直接写 <ry-modal />。

方式二：手动导入

组件放在其他任意位置时，显式导入注册即可，与 easycom 不冲突（显式导入优先生效）：

// <script setup> 中 import 后直接使用，或注册到 components 选项
import ryModal from '@/components/ry-modal/ry-modal.vue'

方式三：uni_modules 导入

通过 HBuilderX 从插件市场导入 uni_modules，组件位于 uni_modules/ry-modal/components/ry-modal/ 下，同样自动注册，无需 import。

使用示例

<template>
  <!-- 1. 简单对话 -->
  <ry-modal v-model:visible="show" title="提示" content="确定删除？" @confirm="onOk"/>

  <!-- 2. 底部弹出（替代 popup） -->
  <ry-modal v-model:visible="show" mode="popup" position="bottom" :show-footer="false">
    <view>自定义内容</view>
  </ry-modal>

  <!-- 3. 异步 confirm：点击后 loading，业务结束后手动关闭 -->
  <ry-modal
    v-model:visible="show"
    :confirm-loading="loading"
    :close-on-confirm="false"
    @confirm="submit"
  />

  <!-- 4. 完全自定义底部 -->
  <ry-modal v-model:visible="show">
    <template #footer>
      <view @click="show = false">我知道了</view>
    </template>
  </ry-modal>
</template>

Props

Events

Slots

Methods（通过 ref 调用）

技术支持

• 微信：howe1144（一定在线，紧急问题首选）
• QQ 群：415367029（常规问题，群友互助，作者可能在线）
• ***（很少在线）
• 插件市场评论区：回复不及时，仅适合不着急的留言反馈

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助