更新记录

1.0.0（2025-09-04）

V 1.0.0

初次发版

UNIAPP 模态框插件，支持 alert、confirm、prompt 等多种类型。

平台兼容性

uni-app(4.07)

uni-app x(4.07)

其他

hy-modal

UNIAPP 模态框插件，支持 alert、confirm、prompt 等多种类型。

安装

1. 将本插件导入到您的 UNIAPP 项目中，放入 components 目录下（如 /components/hy-modal/）。
2. 在页面中引入组件。

使用

在页面中引入组件

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

    <hy-modal ref="alertModal" type="alert" title="提示" content="这是一个Alert弹窗" @confirm="onConfirm"></hy-modal>
    <hy-modal ref="confirmModal" type="confirm" title="确认" content="这是一个Confirm弹窗" @confirm="onConfirm" @cancel="onCancel"></hy-modal>
    <hy-modal ref="promptModal" type="prompt" title="输入" content="请输入内容：" @confirm="onPromptConfirm" @cancel="onCancel"></hy-modal>
  </view>
</template>

<script>
import UniModal from '@/components/hy-modal/hy-modal.vue';

export default {
  components: {
    UniModal
  },
  methods: {
    showAlert() {
      this.$refs.alertModal.show();
    },
    showConfirm() {
      this.$refs.confirmModal.show();
    },
    showPrompt() {
      this.$refs.promptModal.show();
    },
    onConfirm() {
      console.log('用户点击了确定');
    },
    onCancel() {
      console.log('用户点击了取消');
    },
    onPromptConfirm(value) {
      console.log('用户输入：', value);
    }
  }
};
</script>

属性说明

属性名       类型        默认值 说明
type          String    'alert' 模态框类型，可选：alert, confirm, prompt
title         String    '提示'    标题
content       String    ''      内容
confirmText   String    '确定'    确认按钮文本
cancelText    String    '取消'    取消按钮文本（alert类型没有取消按钮）
placeholder   String    '请输入'   输入框的占位符（仅prompt类型有效）
maskClosable  Boolean   false   是否允许点击遮罩关闭

事件说明

事件名 说明                  回调参数
confirm 点击确认按钮时触发   对于prompt类型，返回输入内容；其他类型无参数
cancel  点击取消按钮时触发

方法

方法名 说明
show    显示模态框
hide    隐藏模态框

样式自定义

您可以通过覆盖 CSS 变量来自定义样式，或者直接修改组件的样式。