|
typescript
// 1. 安装依赖
// ohpm install @pura/harmony-dialog --save
// 2. 封装通用弹窗工具
import {
AlertDialog, ConfirmDialog, DatePickerDialog, LoadingDialog
} from '@pura/harmony-dialog';
// 初始化弹窗(全局一次即可)
export function initDialog() {
// 可全局配置默认样式
AlertDialog.config({
titleColor: '#333333',
contentColor: '#666666',
confirmColor: '#007AFF'
});
}
// 提示弹窗
export function showAlert(message: string, title: string = '提示') {
return new Promise<void>((resolve) => {
AlertDialog.show({
title,
content: message,
confirmText: '确定',
onConfirm: () => resolve()
});
});
}
// 确认弹窗
export function showConfirm(
message: string,
title: string = '确认'
): Promise<boolean> {
return new Promise((resolve) => {
ConfirmDialog.show({
title,
content: message,
confirmText: '确定',
cancelText: '取消',
onConfirm: () => resolve(true),
onCancel: () => resolve(false)
});
});
}
// 日期选择弹窗
export function showDatePicker(
defaultDate: Date = new Date()
): Promise<Date> {
return new Promise((resolve) => {
DatePickerDialog.show({
startDate: new Date(2020, 0, 1),
endDate: new Date(2030, 11, 31),
selectedDate: defaultDate,
onSelect: (date) => resolve(date)
});
});
}
// 加载弹窗
export let loadingDialog: LoadingDialog;
export function showLoading(message: string = '加载中...') {
if (loadingDialog) loadingDialog.hide();
loadingDialog = LoadingDialog.show({
content: message,
mask: true // 显示遮罩,禁止背景操作
});
}
export function hideLoading() {
if (loadingDialog) {
loadingDialog.hide();
loadingDialog = null;
}
}
// 3. 组件中使用示例
@Entry
@Component
struct DialogDemo {
aboutToAppear() {
initDialog(); // 初始化弹窗
}
build() {
Column() {
Button('显示提示弹窗')
.onClick(async () => {
await showAlert('操作成功');
});
Button('显示确认弹窗')
.onClick(async () => {
const confirm = await showConfirm('确定要删除该数据吗?');
if (confirm) {
// 执行删除操作
}
});
Button('显示日期选择')
.onClick(async () => {
const date = await showDatePicker();
console.log(`选中日期: ${date.toLocaleDateString()}`);
});
Button('显示加载弹窗')
.onClick(() => {
showLoading();
// 模拟接口请求
setTimeout(() => {
hideLoading();
}, 2000);
});
}
}
} |
所有评论(0)