mirror of
https://github.com/liubinfighter/csv-lite.git
synced 2026-07-22 05:43:52 +00:00
feat: 添加行和列操作按钮隐藏功能,优化用户体验
This commit is contained in:
parent
3503dec8ed
commit
8464338565
3 changed files with 60 additions and 0 deletions
38
docs/button-visibility.md
Normal file
38
docs/button-visibility.md
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
# 关于隐藏行和列操作按钮的说明
|
||||
|
||||
## 背景
|
||||
|
||||
在当前版本中,行和列操作按钮(插入、删除等)暂时被隐藏,原因如下:
|
||||
|
||||
1. **用户体验**:目前这些按钮的使用体验有待提高,可能会对用户操作造成干扰。
|
||||
2. **功能优化**:我们计划对这些按钮的交互和视觉效果进行优化,以更好地满足用户需求。
|
||||
|
||||
## 修改内容
|
||||
|
||||
在 `styles.css` 文件中,以下样式被添加以隐藏这些按钮:
|
||||
|
||||
```css
|
||||
.csv-insert-row-btn,
|
||||
.csv-insert-col-btn,
|
||||
.csv-del-row-btn,
|
||||
.csv-del-col-btn {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
## 后续计划
|
||||
|
||||
我们将根据用户反馈和实际需求,对这些按钮进行以下改进:
|
||||
|
||||
- 提升按钮的视觉效果,使其更加直观。
|
||||
- 优化按钮的交互逻辑,减少误操作。
|
||||
- 提供更灵活的配置选项,允许用户根据需要启用或禁用这些按钮。
|
||||
|
||||
## 反馈
|
||||
|
||||
如果您对这一改动有任何意见或建议,请通过以下方式联系我们:
|
||||
|
||||
- GitHub Issue
|
||||
- 用户反馈表单
|
||||
|
||||
感谢您的支持与理解!
|
||||
|
|
@ -289,6 +289,20 @@ export function renderTable(options: TableRenderOptions) {
|
|||
}
|
||||
|
||||
// 滚动条容器宽度同步逻辑建议由主类处理
|
||||
|
||||
// Add event listener to deselect active row or column when clicking outside
|
||||
const deselectActiveHeader = () => {
|
||||
const activeHeaders = tableEl.querySelectorAll('.csv-col-number.active, .csv-row-number.active');
|
||||
activeHeaders.forEach(header => header.classList.remove('active'));
|
||||
};
|
||||
|
||||
document.addEventListener('click', (e) => {
|
||||
const target = e.target as HTMLElement | null;
|
||||
const isHeaderClick = target?.closest('.csv-col-number, .csv-row-number');
|
||||
if (!isHeaderClick) {
|
||||
deselectActiveHeader();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 建议在 styles.css 添加 .dragging 和 .drag-over 的样式以增强拖拽反馈
|
||||
|
|
|
|||
|
|
@ -484,6 +484,14 @@ td input:focus {
|
|||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* 暂时隐藏行和列操作按钮 */
|
||||
.csv-insert-row-btn,
|
||||
.csv-insert-col-btn,
|
||||
.csv-del-row-btn,
|
||||
.csv-del-col-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/* 插入/删除行列按钮样式 */
|
||||
.csv-insert-row-btn,
|
||||
.csv-insert-col-btn,
|
||||
|
|
|
|||
Loading…
Reference in a new issue