更新记录

1.0.0（2025-07-17） 下载此版本

iOS弹窗组件

完美还原iOS风格的弹窗组件，支持多种弹窗类型和友好的交互体验。

特色功能

平台兼容性

uni-app(4.06)

uni-app x(4.06)

iOS Modal 组件使用说明

📦 组件结构

uni_modules/ios-modal/
├── components/
│   ├── ios-modal/
│   │   └── ios-modal.vue          # 核心弹窗组件
│   └── ios-modal-demo/
│       └── ios-modal-demo.vue     # 演示组件（可选）
├── package.json                   # 组件配置
└── readme.md                     # 说明文档

🚀 快速开始

1. 基础使用

在页面中引入并使用 iOS Modal 组件：

<template>
  <view>
    <!-- 触发按钮 -->
    <button @tap="showAlert">显示提示</button>

    <!-- iOS Modal 组件 -->
    <ios-modal ref="iosModal"></ios-modal>
  </view>
</template>

<script>
import iosModal from '@/uni_modules/ios-modal/components/ios-modal/ios-modal.vue'

export default {
  components: {
    iosModal
  },
  methods: {
    showAlert() {
      this.$refs.iosModal.show({
        type: 'alert',
        title: '提示',
        content: '这是一个提示消息',
        confirmText: '确定'
      })
    }
  }
}
</script>

2. 使用演示组件

如果您想快速体验所有功能，可以直接使用演示组件：

<template>
  <view>
    <ios-modal-demo></ios-modal-demo>
  </view>
</template>

<script>
import iosModalDemo from '@/uni_modules/ios-modal/components/ios-modal-demo/ios-modal-demo.vue'

export default {
  components: {
    iosModalDemo
  }
}
</script>

🎯 弹窗类型

1. 基础提示 (alert)

this.$refs.iosModal.show({
  type: 'alert',
  title: '提示',
  content: '这是一个基础提示',
  confirmText: '确定'
})

2. 确认对话框 (confirm)

this.$refs.iosModal.show({
  type: 'confirm',
  title: '确认操作',
  content: '您确定要执行此操作吗？',
  confirmText: '确定',
  cancelText: '取消',
  onConfirm: () => {
    console.log('用户点击了确定')
  },
  onCancel: () => {
    console.log('用户点击了取消')
  }
})

3. 输入对话框 (input)

this.$refs.iosModal.show({
  type: 'input',
  title: '请输入',
  content: '请输入您的姓名',
  placeholder: '请输入姓名',
  confirmText: '确定',
  cancelText: '取消',
  onConfirm: (value) => {
    console.log('用户输入了：', value)
  }
})

4. 操作表 (actionSheet)

this.$refs.iosModal.show({
  type: 'actionSheet',
  title: '选择操作',
  actions: [
    { text: '拍照', color: '#007aff' },
    { text: '从相册选择', color: '#007aff' },
    { text: '删除', color: '#ff3b30' }
  ],
  cancelText: '取消',
  onAction: (index, action) => {
    console.log('选择了：', action.text)
  }
})

5. 自定义内容 (custom)

this.$refs.iosModal.show({
  type: 'custom',
  title: '自定义内容',
  customContent: `
    <view style="padding: 20px; text-align: center;">
      <text>这里可以放置任何自定义内容</text>
    </view>
  `,
  confirmText: '知道了'
})

6. 加载弹窗 (loading)

this.$refs.iosModal.show({
  type: 'loading',
  title: '加载中...',
  content: '请稍候，正在处理您的请求'
})

// 手动关闭
setTimeout(() => {
  this.$refs.iosModal.hide()
}, 3000)

7. Toast 提示 (toast)

this.$refs.iosModal.show({
  type: 'toast',
  content: '这是一个 Toast 提示消息',
  duration: 2000
})

8. 底部弹窗 (bottom)

this.$refs.iosModal.show({
  type: 'bottom',
  title: '底部弹窗',
  content: '这是从底部弹出的模态框',
  confirmText: '确定',
  cancelText: '取消'
})

⚙️ 配置参数

🎨 特色功能

• ✅ 完美还原 iOS 设计 - 高度还原 iOS 系统弹窗样式
• ✅ 8种弹窗类型 - 覆盖常见使用场景
• ✅ 流畅动画效果 - 原生级别的动画体验
• ✅ 响应式设计 - 适配不同屏幕尺寸
• ✅ 易于使用 - 简单的API设计
• ✅ 高度可定制 - 支持自定义内容和样式
• ✅ 跨平台兼容 - 支持微信小程序、H5、App等平台

📱 兼容性

• ✅ 微信小程序
• ✅ H5
• ✅ App (iOS/Android)
• ✅ 支付宝小程序
• ✅ 百度小程序
• ✅ 字节跳动小程序
• ✅ QQ小程序

📄 许可证

MIT License

享受使用 iOS Modal 组件！ 🎉