更新记录

1.0.3（2025-12-12） 下载此版本

统一回调参数结构,所有操作以action进行区分

1.0.2（2025-12-12） 下载此版本

修复非调试模式下函数会被压缩替换导致找不到的问题

1.0.1（2025-12-10） 下载此版本

增加自定义背景颜色功能,现在可以使用maskStyle和dialogStyle进行直接自定义

平台兼容性

uni-app(4.66)

liaction-dialog 对话框模块

概述

liaction-dialog 是统一对话框实现模块，基于 UniApp API 构建，支持自定义样式。

温馨提示

• 不支持在小程序端使用
• 项目自用, 不建议在其他项目中使用,如果有需求, 请确认是否适合你们的项目

平台兼容性

• H5
• App 端 (iOS/Android)
• 不支持小程序端 (微信/支付宝/百度/头条/抖音)

核心方法

showModal

显示对话框

参数配置(部分):

• title：对话框标题
• content：对话框内容
• type：对话框类型，可选值：default、loading
• showCancel：是否显示取消按钮，默认 true
• cancelText：取消按钮文本，默认 "取消"
• confirmText：确认按钮文本，默认 "确定"
• cancelColor：取消按钮颜色，默认 "#999999"
• confirmColor：确认按钮颜色，默认 "#007AFF"
• maskClosable：点击遮罩层是否可关闭，默认 true
• showButtons：是否显示按钮区域，默认 true
• width：对话框宽度
• height：对话框高度
• position：对话框位置，可选值：center、top、bottom、left、right
• animationDuration：动画持续时间
• extras：自定义数据，会在回调中返回
• topArea：顶部自定义区域配置
• titleArea：标题区域配置
• contentArea：内容区域配置
• bottomArea：底部自定义区域配置
• outerTopArea：外部顶部区域配置
• outerBottomArea：外部底部区域配置
• titleStyle：标题样式对象
• cancelButtonStyle：取消按钮样式对象
• confirmButtonStyle：确认按钮样式对象
• customStyle：自定义样式字符串，直接添加到style标签中
• maskStyle：遮罩层样式对象，用于自定义遮罩层背景色、透明度等
• dialogStyle：对话框样式对象，用于自定义对话框背景色、颜色、圆角等
• showScrollbar：是否显示滚动条，默认 true
• scrollbarWidth：滚动条宽度，默认 "4px"
• scrollbarColor：滚动条颜色，默认 "rgba(0, 0, 0, 0.2)"
• scrollbarTrackColor：滚动条轨道颜色，默认 "transparent"
• scrollbarBorderRadius：滚动条圆角，默认 "2px"
• closeOnConfirm：确认后是否自动关闭，默认 true
• events：自定义事件配置，格式：[{selector, eventType, action, autoCloseDialog, extras}]
• useModalArea：是否使用modalArea替代整个对话框内容
• modalArea：自定义模态区域配置，包含content和style属性
• useOuterTopArea：是否使用外部顶部区域
• useOuterBottomArea：是否使用外部底部区域
• leftArea：左侧区域配置（用于flex布局），包含content和style属性
• rightArea：右侧区域配置（用于flex布局），包含content和style属性
• useFallback：是否直接使用兜底方案，默认false
• success：成功回调函数
• fail：失败回调函数
• complete：完成回调函数

返回值：返回 Promise 或包含 modalId 的对象

closeModal

关闭当前打开的对话框

参数：可选的 modalId 列表 返回值：关闭结果对象

closeModalById

根据 modalId 关闭指定的对话框

参数：modalId - 弹窗ID 返回值：关闭结果对象

hideModal

隐藏指定的弹窗但不移除它

参数：可选的 modalId 列表 返回值：隐藏结果对象

showModalById

根据 modalId 显示之前隐藏的弹窗

参数：modalId - 弹窗ID 返回值：显示结果对象

closeAllModals

关闭所有弹窗

返回值：关闭结果对象

showLoading

显示加载弹窗

参数：

• options：配置对象或加载文本字符串
  • content：加载文本
  • 其他 showModal 支持的配置

返回值：返回 Promise 或包含 modalId 的对象

hideLoading

隐藏加载弹窗

参数：

• modalId：可选，指定要隐藏的弹窗ID
• options：可选配置
  • hideAll：是否隐藏所有loading类型弹窗

返回值：操作结果

元素操作方法

setElementProps

设置元素属性

参数：

• selector：元素选择器
• props：属性对象

triggerElementEvent

触发元素事件

参数：

• selector：元素选择器
• eventType：事件类型
• eventData：事件数据

batchUpdateElements

批量更新元素

参数：

• updates：更新配置数组

setInputValue

设置输入框值

参数：

• selector：输入框选择器
• value：输入值

setElementText

设置元素文本内容

参数：

• selector：元素选择器
• text：文本内容

setElementStyle

设置元素样式

参数：

• selector：元素选择器
• style：样式对象

setElementDisabled

设置元素禁用状态

参数：

• selector：元素选择器
• disabled：禁用状态

回调函数参数

success/fail/complete 回调参数结构

{
  action: string,   // 操作类型 ('confirm'|'cancel'|...)
  modalId: string,  // 弹窗ID
  extras: object,   // 自定义数据
  value: any,       // 返回值
  dialog: object,    // 对话框控制方法
  el: object         // 元素值
}

示例代码

基本使用

// 引入模块
import dialog from '@/uni_modules/liaction-dialog/js_sdk/dialog.js';

// 显示普通对话框
dialog.showModal({
  title: '提示',
  content: '这是一个普通对话框',
  success(res) {
    if (res.action === 'confirm') {
      console.log('用户点击了确定');
    } else if (res.action === 'cancel') {
      console.log('用户点击了取消');
    }
  }
});

// 显示加载弹窗
const loadingModal = dialog.showLoading('加载中...');
// 隐藏加载弹窗
setTimeout(() => {
  dialog.hideLoading(loadingModal.modalId);
}, 2000);

// 初始化全局配置
dialog.initDialog({
  debug: true,
  animationDuration: 300,
  defaultCancelText: '取消操作',
  defaultConfirmText: '确认操作'
});

自定义样式

dialog.showModal({
  title: '自定义样式',
  content: '这是一个自定义样式的对话框',
  width: '80%',
  height: '200px',
  position: 'center',
  cancelColor: '#999999',
  confirmColor: '#007AFF',
  maskClosable: true
});

自定义背景样式

dialog.showModal({
  title: '自定义背景',
  content: '这是一个使用maskStyle和dialogStyle自定义背景的对话框',
  width: '80%',
  // 自定义遮罩层背景为半透明红色
  maskStyle: {
    backgroundColor: 'rgba(255, 0, 0, 0.75)'
  },
  // 自定义对话框背景为淡蓝色
  dialogStyle: {
    backgroundColor: '#e3f2fd',
    color: '#333',
    borderRadius: '20px'
  },
  maskClosable: true
});

Promise 方式调用

try {
  const res = await dialog.showModal({
    title: '确认操作',
    content: '是否继续执行此操作？'
  });
  if (res.action === 'confirm') {
    console.log('用户确认了操作');
  }
} catch (err) {
  console.error('对话框操作失败', err);
}