Openharmony & VCordova三方库适配1.2.0 - 弹窗组件-优快云博客

📊 UI 展示

默认弹窗

在这里插入图片描述

确认框

在这里插入图片描述

成功提示

在这里插入图片描述

错误提示

在这里插入图片描述

为什么需要弹窗组件

在 v1.0.0 和 v1.1.0 中，我们完成了数据展示的功能。现在数据有了，图表也有了，但用户交互呢？

弹窗是最常见的交互方式。删除操作需要确认，操作成功需要提示，出错了需要告诉用户。这些都需要弹窗。

v1.2.0 的弹窗组件支持多种类型：提示框、确认框、成功提示、错误提示等。提供丰富的自定义选项和流畅的动画效果。

快速上手

第一步：引入文件

<link rel="stylesheet" href="components/modal/modal.css">
<script src="components/modal/modal.js"></script>

CSS 文件包含弹窗的样式，JS 文件包含 Modal 类的实现。

第二步：创建弹窗

const modal = new Modal({
    title: '提示',
    content: '这是一个弹窗',
    type: 'default'
});

创建一个弹窗实例很简单。传入一个配置对象，包含以下属性：

title: 弹窗标题
content: 弹窗内容
type: 弹窗类型，支持 ‘default’、‘alert’、‘confirm’、‘success’、‘error’

第三步：打开弹窗

modal.open();

调用 open() 方法就能打开弹窗。弹窗会显示在屏幕中央，带有遮罩和动画效果。

第四步：关闭弹窗

modal.close();

调用 close() 方法就能关闭弹窗。用户也可以点击关闭按钮或遮罩来关闭。

弹窗类型

default（默认）

const modal = new Modal({
    title: '默认弹窗',
    content: '这是一个默认类型的弹窗',
    type: 'default'
});

modal.open();

默认弹窗用于一般的提示。没有特殊的样式，就是一个普通的弹窗。

alert（提示）

Modal.alert('提示', '这是一个提示框', () => {
    console.log('用户点击了确定');
});

提示框用于显示简单的信息提示。只有一个"确定"按钮。这是一个快捷方法，不需要手动创建实例。

confirm（确认）

Modal.confirm('确认删除', '确定要删除吗？', () => {
    console.log('用户点击了确定');
}, () => {
    console.log('用户点击了取消');
});

确认框用于需要用户确认的操作。有"确定"和"取消"两个按钮。可以分别处理确认和取消的回调。

success（成功）

Modal.success('成功', '操作已完成', () => {
    console.log('用户点击了确定');
});

成功提示用于操作成功的提示。标题前会自动添加一个绿色的对勾符号。

error（错误）

Modal.error('错误', '操作失败，请重试', () => {
    console.log('用户点击了确定');
});

错误提示用于操作失败的提示。标题前会自动添加一个红色的叉号符号。

自定义按钮

有时候需要自定义弹窗的按钮。

创建自定义按钮

const modal = new Modal({
    title: '选择操作',
    content: '请选择要执行的操作',
    buttons: [
        {
            text: '保存',
            type: 'primary',
            onClick: () => {
                console.log('用户点击了保存');
            }
        },
        {
            text: '取消',
            type: 'secondary',
            onClick: () => {
                console.log('用户点击了取消');
            }
        }
    ]
});

modal.open();

buttons 是一个数组，每个元素是一个按钮对象。按钮对象包含以下属性：

text: 按钮文字
type: 按钮类型，‘primary’ 或 ‘secondary’
onClick: 点击回调函数
closeAfterClick: 点击后是否关闭弹窗，默认 true

按钮类型

primary: 主按钮，通常用于确认操作，背景色为主色
secondary: 次按钮，通常用于取消操作，背景色为浅色

动态更新内容

弹窗打开后，可以动态更新标题和内容。

更新标题

const modal = new Modal({
    title: '加载中...',
    content: '正在加载数据...'
});

modal.open();

// 模拟异步操作
setTimeout(() => {
    modal.setTitle('加载完成');
}, 2000);

setTitle() 方法会更新弹窗的标题。

更新内容

modal.setContent('新的内容');

setContent() 方法会更新弹窗的内容。这对于异步加载数据的场景很有用。

自定义选项

弹窗支持丰富的自定义选项。

宽度

const modal = new Modal({
    title: '标题',
    content: '内容',
    width: '600px'  // 自定义宽度
});

modal.open();

默认宽度是 400px，可以根据需要调整。

遮罩

const modal = new Modal({
    title: '标题',
    content: '内容',
    showMask: false  // 不显示遮罩
});

modal.open();

showMask 控制是否显示遮罩。默认显示。

点击遮罩关闭

const modal = new Modal({
    title: '标题',
    content: '内容',
    closeOnMask: false  // 点击遮罩不关闭
});

modal.open();

closeOnMask 控制点击遮罩是否关闭弹窗。默认关闭。

动画

const modal = new Modal({
    title: '标题',
    content: '内容',
    animation: false  // 禁用动画
});

modal.open();

animation 控制是否启用动画效果。默认启用。

回调函数

弹窗支持确认和取消的回调函数。

确认回调

const modal = new Modal({
    title: '确认',
    content: '确定要继续吗？',
    type: 'confirm',
    onConfirm: () => {
        console.log('用户点击了确定');
    }
});

modal.open();

onConfirm 会在用户点击确定按钮时调用。

取消回调

const modal = new Modal({
    title: '确认',
    content: '确定要继续吗？',
    type: 'confirm',
    onCancel: () => {
        console.log('用户点击了取消');
    }
});

modal.open();

onCancel 会在用户点击取消按钮时调用。

实现原理

遮罩和弹窗

// 创建遮罩
this.mask = document.createElement('div');
this.mask.className = 'modal-mask';
document.body.appendChild(this.mask);

// 创建弹窗
this.modal = document.createElement('div');
this.modal.className = 'modal';
document.body.appendChild(this.modal);

弹窗由两部分组成：遮罩和弹窗容器。遮罩是一个半透明的背景，弹窗容器是实际的弹窗。

动画效果

// 显示时添加动画类
this.modal.classList.add('modal-show');

// CSS 中定义动画
@keyframes modalPopIn {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

弹窗使用 CSS 动画实现弹出效果。从小到大，从透明到不透明，给用户一个流畅的视觉体验。

事件处理

// 绑定按钮事件
this.modal.querySelectorAll('.modal-footer .btn').forEach((btn, index) => {
    btn.addEventListener('click', (e) => {
        // 处理点击事件
    });
});