Box.js

Box for modal / toast

< Feedback on Box.js

Review: Good - script works

§
Posted: 2023/12/30
  • 建议增加高度设定
  • 第一个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 '一些返回的数据'; }, }, });

invobzvrAuthor
§
Posted: 2024/01/12

在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';
    },
});

Post reply

Sign in to post a reply.