feat(M2.5): 图标点击事件 (v0.1.5)
- SaladIcon 支持传入 onClick 回调函数 - 点击图标打印 'icon clicked' 到控制台 - 点击后图标保持显示
This commit is contained in:
parent
aca09ccf25
commit
4e12552437
@ -7,7 +7,7 @@
|
||||
## 版本速查
|
||||
|
||||
### 当前版本
|
||||
`0.1.4` → 下一目标 `0.1.5` ([M2.5](./M2.md))
|
||||
`0.1.5` → 下一目标 `0.1.6` ([M2.6](./M2.md))
|
||||
|
||||
### 模块版本范围
|
||||
|
||||
|
||||
@ -65,9 +65,9 @@ M11.10完成 → 1.0.0 (正式发布)
|
||||
|
||||
## 当前状态
|
||||
|
||||
**当前版本**: `0.1.4`
|
||||
**当前进度**: 9/97 (9%)
|
||||
**下一任务**: [M2.5 图标点击事件](./M2.md#m25-图标点击事件--目标版本-0115)
|
||||
**当前版本**: `0.1.5`
|
||||
**当前进度**: 10/97 (10%)
|
||||
**下一任务**: [M2.6 基础面板组件](./M2.md#m26-基础面板组件--目标版本-0116)
|
||||
|
||||
---
|
||||
|
||||
|
||||
@ -33,7 +33,7 @@
|
||||
| M2.2 | 0.1.2 | 获取选中文本坐标 | ✅ | 2026-02-09 |
|
||||
| M2.3 | 0.1.3 | 沙拉图标组件 | ✅ | 2026-02-09 |
|
||||
| M2.4 | 0.1.4 | 图标定位显示 | ✅ | 2026-02-09 |
|
||||
| M2.5 | 0.1.5 | 图标点击事件 | ⬜ | - |
|
||||
| M2.5 | 0.1.5 | 图标点击事件 | ✅ | 2026-02-09 |
|
||||
| M2.6 | 0.1.6 | 基础面板组件 | ⬜ | - |
|
||||
| M2.7 | 0.1.7 | 面板位置计算 | ⬜ | - |
|
||||
| M2.8 | 0.1.8 | 图标-面板联动 | ⬜ | - |
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"manifest_version": 3,
|
||||
"name": "沙拉查词",
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.5",
|
||||
"description": "聚合词典划词翻译",
|
||||
"permissions": [
|
||||
"storage",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "salad-dict",
|
||||
"version": "0.1.4",
|
||||
"version": "0.1.5",
|
||||
"description": "聚合词典划词翻译",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
|
||||
@ -12,7 +12,13 @@ const OFFSET_Y = -12; // 图标相对于选中文本的垂直偏移
|
||||
* 沙拉图标类
|
||||
*/
|
||||
export class SaladIcon {
|
||||
constructor() {
|
||||
/**
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {Function} options.onClick - 点击回调函数
|
||||
*/
|
||||
constructor(options = {}) {
|
||||
this.options = options;
|
||||
this.onClick = options.onClick || null;
|
||||
this.element = this.createElement();
|
||||
}
|
||||
|
||||
@ -69,9 +75,14 @@ export class SaladIcon {
|
||||
</div>
|
||||
`;
|
||||
|
||||
// 阻止点击事件冒泡(避免触发 document click 导致图标消失)
|
||||
// 处理图标点击
|
||||
container.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
console.log('[SaladDict] Icon clicked');
|
||||
|
||||
if (this.onClick) {
|
||||
this.onClick(e);
|
||||
}
|
||||
});
|
||||
|
||||
// 添加到页面
|
||||
@ -113,10 +124,12 @@ export class SaladIcon {
|
||||
* 创建并显示沙拉图标
|
||||
* @param {number} x - X坐标
|
||||
* @param {number} y - Y坐标
|
||||
* @param {Object} options - 配置选项
|
||||
* @param {Function} options.onClick - 点击回调函数
|
||||
* @returns {SaladIcon} 图标实例
|
||||
*/
|
||||
export function createSaladIcon(x, y) {
|
||||
const icon = new SaladIcon();
|
||||
export function createSaladIcon(x, y, options = {}) {
|
||||
const icon = new SaladIcon(options);
|
||||
icon.show(x, y);
|
||||
return icon;
|
||||
}
|
||||
|
||||
@ -120,8 +120,14 @@ function showSaladIcon(x, y) {
|
||||
currentIcon = null;
|
||||
}
|
||||
|
||||
// 创建新图标
|
||||
currentIcon = createSaladIcon(x, y);
|
||||
// 创建新图标,传入点击回调
|
||||
currentIcon = createSaladIcon(x, y, {
|
||||
onClick: (event) => {
|
||||
logger.info('Icon click callback triggered');
|
||||
// 点击后图标不消失(后续再处理)
|
||||
}
|
||||
});
|
||||
|
||||
console.log('[SaladDict] Icon shown at:', x, y);
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user