更新记录

1.0.0（2025-10-20） 下载此版本

1.0.0

平台兼容性

uni-app x

其他

custom-modal

开发文档

UTS 语法 UTS API插件 UTS uni-app兼容模式组件 UTS 标准模式组件 Hello UTS

CustomModal 自定义弹框组件

功能特点

• ✅ 支持多种位置：center（居中）、top（顶部）、bottom（底部）、left（左侧）、right（右侧）
• ✅ 支持自定义按钮配置
• ✅ 支持插槽自定义内容
• ✅ 支持关闭按钮
• ✅ 支持点击遮罩层关闭
• ✅ 带动画效果

基础用法

1. 引入组件

<script setup lang="uts">
import CustomModal from '@/components/custom-modal.uvue'
import { ref } from 'vue'

const modalShow = ref(false)
</script>

<template>
  <view>
    <view @tap="modalShow = true">打开弹框</view>

    <custom-modal
      v-model:show="modalShow"
      title="提示"
      content="这是弹框内容"
    />
  </view>
</template>

2. 不同位置的弹框

<!-- 居中显示（默认） -->
<custom-modal v-model:show="show" position="center" title="居中弹框" />

<!-- 顶部显示 -->
<custom-modal v-model:show="show" position="top" title="顶部弹框" />

<!-- 底部显示 -->
<custom-modal v-model:show="show" position="bottom" title="底部弹框" />

<!-- 左侧显示 -->
<custom-modal v-model:show="show" position="left" title="左侧弹框" />

<!-- 右侧显示 -->
<custom-modal v-model:show="show" position="right" title="右侧弹框" />

3. 自定义按钮

<script setup>
const buttons = [
  { text: '取消', type: 'cancel' },
  { text: '确认', type: 'confirm', primary: true }
]

// 单按钮
const singleButton = [
  { text: '我知道了', type: 'confirm', primary: true }
]

// 多按钮
const multiButtons = [
  { text: '取消', type: 'cancel' },
  { text: '稍后', type: 'later' },
  { text: '确认', type: 'confirm', primary: true }
]
</script>

<template>
  <custom-modal
    v-model:show="show"
    title="自定义按钮"
    :buttons="buttons"
    @confirm="handleConfirm"
    @cancel="handleCancel"
  />
</template>

4. 自定义内容（使用插槽）

<custom-modal
  v-model:show="show"
  title="自定义内容"
>
  <view class="custom-content">
    <image src="/static/logo.png" />
    <text>这是自定义内容</text>
  </view>
</custom-modal>

5. 无按钮弹框

<custom-modal
  v-model:show="show"
  title="提示"
  content="这是一个无按钮弹框"
  :show-buttons="false"
/>

Props 参数

Buttons 按钮配置

每个按钮对象支持以下属性：

{
  text: '按钮文本',        // 必填
  type: 'confirm',        // 按钮类型：confirm/cancel/其他
  primary: true,          // 是否为主要按钮（蓝色高亮）
  closeOnClick: true,     // 点击后是否关闭弹框（默认true）
  style: {}              // 自定义样式
}

Events 事件

Slots 插槽

完整示例

<script setup lang="uts">
import { ref } from 'vue'
import CustomModal from '@/components/custom-modal.uvue'

const modalShow = ref(false)

const buttons = [
  { text: '取消', type: 'cancel' },
  { text: '确认', type: 'confirm', primary: true }
]

const handleConfirm = () => {
  console.log('确认')
  uni.showToast({ title: '已确认', icon: 'success' })
}

const handleCancel = () => {
  console.log('取消')
}

const handleButtonClick = (data) => {
  console.log('按钮点击:', data.button.text)
}
</script>

<template>
  <view>
    <view @tap="modalShow = true">打开弹框</view>

    <custom-modal
      v-model:show="modalShow"
      title="温馨提示"
      content="确定要执行此操作吗？"
      position="center"
      :show-close="true"
      :close-on-click-overlay="true"
      :buttons="buttons"
      @confirm="handleConfirm"
      @cancel="handleCancel"
      @button-click="handleButtonClick"
    />
  </view>
</template>

注意事项

1. 使用 v-model:show 双向绑定显示状态
2. position 改变时会自动调整弹框位置
3. 点击按钮默认会关闭弹框，除非设置 closeOnClick: false
4. 自定义内容时可以同时设置 content 和使用插槽，插槽内容会显示在 content 下方