更新记录

1.0.0（2026-06-01）

v1.0.0 - 初始版本

• 支持基础弹框功能
• 支持自定义样式（圆角、背景、按钮颜色）
• 支持插槽内容嵌入
• 支持输入框模式
• 支持多种动画效果（fade/scale/slide-up）
• 支持 Promise API 调用方式
• 支持滚动穿透处理
• 跨平台兼容（App/小程序/H5）

平台兼容性

uni-app(3.7.8)

其他

simple-dialog-pro

一款功能强大、样式优雅的自定义弹框组件，专为 uni-app 框架设计。

为什么需要自定义弹框组件？

官方提供的 uni.showModal 虽然简单，但存在明显的局限性：

特性

• ✅ 完全自定义样式 - 圆角、背景色、按钮颜色、动画效果均可配置
• ✅ 灵活的内容区域 - 通过插槽嵌入任何自定义内容（图片、表单、组件等）
• ✅ Promise 调用方式 - 支持 .then() / .catch() 语法，代码更优雅
• ✅ 跨平台兼容 - 完美支持 App（iOS/Android）、微信小程序、支付宝小程序、H5
• ✅ 滚动穿透处理 - 弹框打开时自动禁止背景页面滚动
• ✅ 遮罩层控制 - 支持自定义透明度、点击关闭等设置
• ✅ 多动画效果 - 淡入淡出、缩放、底部滑入等动画效果
• ✅ 输入框模式 - 支持在弹框内输入内容并获取输入值
• ✅ TypeScript 支持 - 提供完整的类型定义

安装

方式一：直接复制（推荐）

将 simple-dialog-pro 组件文件夹复制到项目的 components 目录下即可使用（遵循 easycom 规范，无需手动引入）。

方式二：npm 安装（待发布）

npm install simple-dialog-pro --save

使用方式

基础用法

<template>
  <view class="container">
    <button @click="showDialog = true">打开弹框</button>

    <simple-dialog-pro 
      v-model:visible="showDialog"
      title="提示"
      content="这是一个基础的弹框组件，支持标题、内容和双按钮。"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </view>
</template>

<script setup>
import { ref } from 'vue'

const showDialog = ref(false)

const handleConfirm = () => {
  console.log('用户点击了确定')
  showDialog.value = false
}

const handleCancel = () => {
  console.log('用户点击了取消')
  showDialog.value = false
}
</script>

自定义内容（插槽）

通过插槽可以嵌入任何自定义内容：

<template>
  <simple-dialog-pro 
    v-model:visible="showDialog" 
    title="自定义内容"
    :showCancel="true"
  >
    <view class="custom-content">
      <view class="icon-wrapper">
        <text class="icon-text">🎉</text>
      </view>
      <text class="custom-title">恭喜您！</text>
      <text class="custom-desc">这是自定义内容区域，可以嵌入任何组件</text>
      <view class="custom-features">
        <view class="feature-item">
          <text class="feature-icon">✓</text>
          <text class="feature-text">支持图片</text>
        </view>
        <view class="feature-item">
          <text class="feature-icon">✓</text>
          <text class="feature-text">支持表单</text>
        </view>
      </view>
    </view>
  </simple-dialog-pro>
</template>

<style lang="scss" scoped>
.custom-content {
  text-align: center;
  padding: 20rpx 0;
}

.icon-wrapper {
  width: 100rpx;
  height: 100rpx;
  background: linear-gradient(135deg, #1677FF 0%, #4080FF 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20rpx;
}

.icon-text {
  font-size: 48rpx;
}

.custom-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  display: block;
  margin-bottom: 10rpx;
}

.custom-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
  line-height: 1.6;
}

.custom-features {
  margin-top: 30rpx;
  display: flex;
  justify-content: center;
  gap: 40rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.feature-icon {
  width: 36rpx;
  height: 36rpx;
  background: #1677FF;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20rpx;
}

.feature-text {
  font-size: 24rpx;
  color: #666;
}
</style>

Promise 调用方式

// 在组件中使用
this.$dialog.alert({
  title: '提示',
  content: '这是一个提示框'
}).then(() => {
  console.log('用户点击了确定')
})

this.$dialog.confirm({
  title: '确认操作',
  content: '确定要删除这条记录吗？'
}).then(() => {
  console.log('用户点击了确定')
}).catch(() => {
  console.log('用户点击了取消')
})

this.$dialog.prompt({
  title: '输入信息',
  content: '请输入您的姓名',
  inputPlaceholder: '请输入姓名'
}).then((value) => {
  console.log('用户输入:', value)
}).catch(() => {
  console.log('用户点击了取消')
})

Props

Events

示例

单按钮弹框（Alert）

<simple-dialog-pro 
  v-model:visible="show"
  title="操作成功"
  content="您的操作已完成"
  :showCancel="false"
  @confirm="handleConfirm"
/>

带输入框的弹框（Prompt）

<simple-dialog-pro 
  v-model:visible="show"
  title="请输入信息"
  content="请在下方输入框中输入您的信息"
  :showInput="true"
  inputPlaceholder="请输入内容..."
  inputType="text"
  @confirm="(value) => handleInput(value)"
  @cancel="handleCancel"
/>

自定义按钮颜色

<simple-dialog-pro 
  v-model:visible="show"
  title="自定义颜色"
  content="确认按钮使用了自定义颜色"
  confirmColor="#FF6B6B"
  cancelColor="#999999"
/>

禁止点击遮罩关闭

<simple-dialog-pro 
  v-model:visible="show"
  title="重要提示"
  content="此操作需要您明确确认"
  :maskClose="false"
/>

底部滑入动画

<simple-dialog-pro 
  v-model:visible="show"
  title="底部滑入"
  content="弹框从底部滑入，类似 ActionSheet 效果"
  animationType="slide-up"
/>

缩放动画

<simple-dialog-pro 
  v-model:visible="show"
  title="缩放效果"
  content="弹框从中心缩放显示"
  animationType="scale"
/>

API 方法

$dialog.alert(options)

显示一个只有确认按钮的弹框

参数：

返回值：Promise，resolve 表示点击确定

示例：

this.$dialog.alert({
  title: '提示',
  content: '这是一个提示'
}).then(() => {
  console.log('用户点击了确定')
})

$dialog.confirm(options)

显示一个带有确认和取消按钮的弹框

参数：

返回值：Promise，resolve 表示点击确定，reject 表示点击取消

示例：

this.$dialog.confirm({
  title: '确认删除',
  content: '确定要删除这条记录吗？'
}).then(() => {
  console.log('用户确认删除')
}).catch(() => {
  console.log('用户取消删除')
})

$dialog.prompt(options)

显示一个带有输入框的弹框

参数：

返回值：Promise，resolve 传入输入值，reject 表示点击取消

示例：

this.$dialog.prompt({
  title: '输入姓名',
  content: '请输入您的姓名',
  inputPlaceholder: '请输入姓名'
}).then((value) => {
  console.log('用户输入:', value)
}).catch(() => {
  console.log('用户取消')
})

注意事项

滚动穿透问题

弹框打开时，背景页面可能会继续滚动，这是移动端常见的问题。simple-dialog-pro 默认已经处理了这个问题（preventScroll: true），但在某些特殊情况下可能需要额外处理：

<simple-dialog-pro 
  v-model:visible="show"
  :preventScroll="true"
/>

微信小程序特殊处理

在微信小程序中，组件根节点的点击事件可能需要特殊处理，simple-dialog-pro 已经做了兼容处理，使用 catchtouchmove 来防止滚动穿透。

遮罩层点击穿透

在 App 端，如果不处理，点击遮罩层的触摸事件可能会穿透到下方页面。simple-dialog-pro 使用 catchtap 来拦截点击事件。

多弹框同时出现

如果需要同时显示多个弹框，simple-dialog-pro 会自动处理层级关系，后弹出的弹框会覆盖前面的。

兼容性

版本历史

v1.0.0

• 初始版本
• 支持基础弹框功能
• 支持自定义样式
• 支持插槽内容
• 支持输入框模式
• 支持多种动画效果
• 支持 Promise API

开发说明

目录结构

simple-dialog-pro/
├── simple-dialog-pro.vue    # 组件核心文件
├── index.js                 # 插件入口（提供 Promise API）
├── README.md                # 组件文档
└── package.json             # 组件配置

开发环境

• UniApp CLI
• Vue 3
• TypeScript（可选）

构建命令

# 开发模式
npm run dev

# 生产构建
npm run build

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

联系方式

如有问题或建议，请通过以下方式联系：

• 提交 Issue：[GitHub Issues]()
• 邮箱：support@example.com