Luckysheet自定义工具栏按钮：添加常用功能

你是否经常在使用Luckysheet时反复寻找某些功能？本文将详细介绍如何通过简单配置，将常用功能添加到工具栏，提升工作效率。完成后，你将能够定制专属工具栏，减少重复操作，让数据处理更流畅。

工具栏配置基础

Luckysheet的工具栏由默认按钮集合和自定义配置两部分组成。核心配置文件为src/controllers/toolbar.js，其中定义了默认按钮顺序和按钮ID映射关系。

默认工具栏按钮数组定义如下：

export const defaultToolbar = [
    'undo', 'redo', 'paintFormat', '|',
    'currencyFormat', 'percentageFormat', 'numberIncrease', 'numberDecrease', 'moreFormats', '|',
    // 更多按钮...
];

数组中使用|符号分隔不同功能组，每个字符串对应一个按钮ID。完整的按钮ID与DOM元素映射关系可在toolbarIdMap对象中查看，例如撤销按钮对应#luckysheet-icon-undo。

自定义工具栏的两种方式

1. 基础配置法

通过修改Luckysheet初始化时的toolbar配置项，可以快速调整工具栏按钮。支持三种操作：

• 添加现有按钮：在数组中加入按钮ID
• 移除默认按钮：从数组中删除对应ID
• 调整顺序：改变按钮ID在数组中的位置

示例：添加"数据验证"和"条件格式"按钮到工具栏

luckysheet.create({
    container: 'luckysheet',
    toolbar: [
        'undo', 'redo', '|', 
        'dataVerification', 'conditionalFormat', '|',  // 新增的功能按钮
        'font', 'fontSize', 'bold', 'italic'
        // 其他按钮...
    ],
    // 其他配置...
});

2. 高级自定义法

对于需要全新功能的场景，可通过以下步骤创建自定义按钮：

步骤1：创建按钮HTML结构

在src/controllers/toolbar.js的htmlMap对象中添加按钮HTML定义：

customButton: `<div class="luckysheet-toolbar-button luckysheet-inline-block" data-tips="自定义功能提示"
id="luckysheet-icon-custom" role="button" style="user-select: none;">
    <div class="luckysheet-toolbar-button-outer-box luckysheet-inline-block">
        <div class="luckysheet-toolbar-button-inner-box luckysheet-inline-block">
            <div class="luckysheet-icon luckysheet-inline-block">
                <div aria-hidden="true" class="luckysheet-icon-img-container luckysheet-icon-img iconfont-luckysheet luckysheet-iconfont-custom"></div>
            </div>
        </div>
    </div>
</div>`

步骤2：添加按钮ID映射

在toolbarIdMap对象中注册新按钮：

export const toolbarIdMap = {
    // 现有映射...
    customButton: '#luckysheet-icon-custom'
};

步骤3：绑定点击事件

在src/controllers/toolbar.js中添加事件监听：

// 在工具栏初始化后添加
document.querySelector('#luckysheet-icon-custom').addEventListener('click', function() {
    // 自定义功能实现
    alert('自定义按钮被点击');
    // 可调用Luckysheet API执行操作，如:
    // luckysheet.setCellValue(0, 0, '自定义功能执行成功');
});

步骤4：更新工具栏配置

将新按钮添加到工具栏数组：

export const defaultToolbar = [
    // 现有按钮...
    'customButton', '|',
    // 其他按钮...
];

实用示例：添加"快速计算"按钮

以下是一个完整示例，添加一个计算选中区域总和的按钮：

1. 在htmlMap中添加按钮HTML
2. 在toolbarIdMap注册按钮ID
3. 绑定点击事件实现计算逻辑：

document.querySelector('#luckysheet-icon-calculate').addEventListener('click', function() {
    const range = luckysheet.getRange();
    if (range) {
        const sum = luckysheet.getRangeData(range).reduce((acc, row) => {
            return acc + row.reduce((rowAcc, cell) => {
                return rowAcc + (parseFloat(cell.v) || 0);
            }, 0);
        }, 0);
        luckysheet.message(`选中区域总和: ${sum}`, 'success');
    } else {
        luckysheet.message('请先选择单元格区域', 'warning');
    }
});

工具栏图标资源

Luckysheet使用iconfont作为图标库，所有图标定义在src/assets/iconfont/iconfont.svg中。如需自定义图标，可替换该文件或在CSS中覆盖样式。

默认图标样式位于src/css/luckysheet-core.css，可通过修改以下CSS类自定义按钮样式：

.luckysheet-toolbar-button {
    /* 按钮基础样式 */
}
.luckysheet-toolbar-button:hover {
    /* 按钮悬停样式 */
}

配置注意事项

1. 按钮ID必须唯一，避免与现有ID冲突
2. 自定义按钮建议添加前缀（如custom-*）便于维护
3. 复杂功能建议封装为独立函数，放置在src/methods/目录下
4. 所有修改需重新构建项目使配置生效

通过自定义工具栏，你可以将"数据透视表"、"导出Excel"、"图表生成"等高频操作集中到显眼位置。根据团队需求定制的工具栏，能显著提升数据协作效率，减少重复操作。现在就尝试配置你的专属工具栏吧！