用ts写一个弹窗的方法,有标题,内容,方法名可以一个字符串参数,也可以一个obj参数
时间: 2024-02-07 09:03:10 浏览: 132
好的,以下是一个用 TypeScript 编写的弹窗方法:
```typescript
interface PopupOptions {
title: string;
content: string;
method: string | (() => void);
}
function popup(options: PopupOptions): void {
const { title, content, method } = options;
const confirmMethod = typeof method === 'string' ? window[method] : method;
// 创建弹窗 DOM
const popupContainer = document.createElement('div');
popupContainer.classList.add('popup-container');
const popupTitle = document.createElement('h2');
popupTitle.textContent = title;
const popupContent = document.createElement('p');
popupContent.textContent = content;
const confirmButton = document.createElement('button');
confirmButton.textContent = '确认';
confirmButton.addEventListener('click', () => {
confirmMethod();
popupContainer.remove();
});
const cancelButton = document.createElement('button');
cancelButton.textContent = '取消';
cancelButton.addEventListener('click', () => {
popupContainer.remove();
});
const buttonContainer = document.createElement('div');
buttonContainer.classList.add('button-container');
buttonContainer.appendChild(cancelButton);
buttonContainer.appendChild(confirmButton);
popupContainer.appendChild(popupTitle);
popupContainer.appendChild(popupContent);
popupContainer.appendChild(buttonContainer);
document.body.appendChild(popupContainer);
}
```
使用该方法时,可以传入一个包含 `title`、`content` 和 `method` 属性的对象:
```typescript
popup({
title: '提示',
content: '确定要删除吗?',
method: 'deleteItem' // 窗口确认后会调用 window.deleteItem 方法
});
```
也可以传入分别对应 `title`、`content` 和 `method` 的三个字符串参数:
```typescript
popup('提示', '确定要删除吗?', 'deleteItem');
```
阅读全文