Box for modal / toast
在params中，每个actions的key对应button的innerText，val对应该button点击时执行的函数，该函数有一个modal element参数，该函数的返回值就是自定义逻辑的返回数据，若没有点击button而是backdrop则返回undefined
const modalBox = new Box({
title: '模态框',
text: '这是一个模态框',
actions: {
OK: () => {
console.log('用户点击了 OK 按钮'); // 这里可以添加更多的逻辑
return '一些返回的数据';
},
Cancel: () => {
console.log('用户点击了 Cancel 按钮'); // 这里可以添加更多的逻辑
return false;
},
},
});
const boxResult = await modalBox; // 没有async环境可以使用 modalBox.then(boxResult => ...)
if (boxResult === '一些返回的数据') {
// 用户点击了 OK 按钮
} else if (boxResult === false) {
// 用户点击了 Cancel 按钮
}
之后的更新会考虑增加自定义params，不过近期由于精力原因可能不会较快更新。目前可以考虑使用params的didBuild参数，在该函数中设置样式等
new Box({
title: 'Custom Style',
html: `<textarea style="height:${window.innerHeight * .5}px;width:100%;white-space:nowrap"></textarea>`,
didBuild: async modal => {
modal.style.height = '50%';
modal.querySelector('textarea').value = 'sample text';
},
});
第一个Example好像有点问题
我用的提示框example1：
const customBoxInstance = new CustomBox({ title: '自定义框', text: '这是一个带有自定义功能的框', });
我用的提示框example2： const simpleBox = new Box({ title: '提示', text: '这是一个简单的提示框', }); customBoxInstance.customFunction();
我用的提示框example3：
const modalBox = new Box({ title: '模态框', text: '这是一个模态框', actions: { OK: () => { console.log('用户点击了 OK 按钮'); // 这里可以添加更多的逻辑 return '一些返回的数据'; }, Cancel: () => { console.log('用户点击了 Cancel 按钮'); // 这里可以添加更多的逻辑 return '一些返回的数据'; }, }, });