更新记录

1.0.0（2025-09-04）

v1.0.0 首次发布

支持alert、confirm、prompt三种弹窗类型

支持五种弹出位置

支持丰富的自定义配置

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

hy-popup-dialog

UNIAPP 弹窗对话框组件，支持多种弹窗类型和自定义配置。

功能特性

• 支持多种类型：alert（提示框）、confirm（确认框）、prompt（输入框）
• 多种弹出位置：中间、顶部、底部、左侧、右侧
• 丰富的自定义选项：标题、内容、按钮文字、颜色等
• 开启动画效果，提升用户体验
• 支持插槽自定义内容

安装使用

1. 将 hy-popup-dialog 文件夹复制到您的 UNIAPP 项目的 components 目录下
2. 在页面中引入组件

<template>
  <view>
    <button @click="showAlert">显示Alert</button>
    <button @click="showConfirm">显示Confirm</button>
    <button @click="showPrompt">显示Prompt</button>

    <hy-popup-dialog 
      :visible.sync="alertVisible" 
      type="alert" 
      title="提示" 
      content="这是一个提示框"
      @confirm="handleConfirm"
    />

    <hy-popup-dialog  
      :visible.sync="confirmVisible" 
      type="confirm" 
      title="确认" 
      content="您确定要执行此操作吗？"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />

    <hy-popup-dialog  
      :visible.sync="promptVisible" 
      type="prompt" 
      title输入" 
      content="请输入内容："
      @confirm="handlePromptConfirm"
      @cancel="handleCancel"
    />
  </view>
</template>

<script>
import HyPopupDialog from '@/components/hy-popup-dialog /hy-popup-dialog .vue';

export default {
  components: {
    HyPopupDialog
  },
  data() {
    return {
      alertVisible: false,
      confirmVisible: false,
      promptVisible: false
    };
  },
  methods: {
    showAlert() {
      this.alertVisible = true;
    },
    showConfirm() {
      this.confirmVisible = true;
    },
    showPrompt() {
      this.promptVisible = true;
    },
    handleConfirm() {
      console.log('用户点击了确认');
    },
    handleCancel() {
      console.log('用户点击了取消');
    },
    handlePromptConfirm(value) {
      console.log('用户输入：', value);
    }
  }
};
</script>

API

Props

参数              类型      默认值 说明
type            String  'alert' 弹窗类型，可选值：alert, confirm, prompt
visible         Boolean false   是否显示弹窗，支持.sync修饰符
title           String  '提示'    弹窗标题
content         String  ''      弹窗内容
confirmText     String  '确定'    确认按钮文字
cancelText      String  '取消'    取消按钮文字
confirmColor    String  '#2979FF'   确认按钮颜色
cancelColor     String  '#999999'   取消按钮颜色
placeholder     String  '请输入'   输入框占位符（prompt类型有效）
inputType       String  'text'  输入框类型（prompt类型有效）
showClose       Boolean true    是否显示关闭按钮
hideButtons     Boolean false   是否隐藏按钮区域
maskClosable    Boolean true    点击遮罩是否关闭弹窗
position        String  'center'    弹窗位置，可选值：center, top, bottom, left, right
animation       Boolean true    是否开启动画

Events

事件名 说明              参数
open    弹窗打开时触发 -
close   弹窗关闭时触发 -
confirm 点击确认按钮时触发   prompt类型返回输入值，其他类型无参数
cancel  点击取消按钮时触发  -

Slots

名称  说明
header  自定义头部内容
body    自定义主体内容

注意事项

1.使用.sync修饰符可以方便地控制弹窗显示隐藏 2.如需完全自定义内容，可以使用插槽并设置hideButtons=true隐藏默认按钮 3.弹窗内容过长时会自动滚动，无需额外处理