Greasy Fork

• 建议增加高度设定

• 第一个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 '一些返回的数据'; }, }, });

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