chore: refactor hover #1998
chore: refactor hover #1998
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors the v-hover directive implementation to improve its functionality, type safety, and maintainability. The refactor transforms a basic touch-only hover directive into a more robust solution with enhanced features.
- Enhanced the directive to support both pointer and touch events with proper fallback handling
- Added comprehensive configuration options and type definitions
- Implemented proper lifecycle management with cleanup and reactive updates
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| // 保存上下文 | ||
| // @ts-ignore - 自定义 symbol 属性 | ||
| el[CTX_KEY] = ctx; | ||
|
|
There was a problem hiding this comment.
Using @ts-ignore suppresses TypeScript checking. Consider extending the HTMLElement interface or using a WeakMap to store context data instead of attaching it directly to DOM elements.
| hoverContextMap.set(el, ctx); |
Copilot uses AI. Check for mistakes.
| }, | ||
| updated(el, binding) { | ||
| // @ts-ignore | ||
| const ctx: HoverContext | undefined = el[CTX_KEY]; |
There was a problem hiding this comment.
Using @ts-ignore suppresses TypeScript checking. Consider extending the HTMLElement interface or using a WeakMap to store context data instead of attaching it directly to DOM elements.
Copilot uses AI. Check for mistakes.
| ctx.current = next; | ||
| }, | ||
| unmounted(el) { | ||
| // @ts-ignore |
There was a problem hiding this comment.
Using @ts-ignore suppresses TypeScript checking. Consider extending the HTMLElement interface or using a WeakMap to store context data instead of attaching it directly to DOM elements.
Copilot uses AI. Check for mistakes.
| el.removeEventListener('touchcancel', ctx.cancelHandler); | ||
| el.removeEventListener('touchmove', ctx.cancelHandler); | ||
| } | ||
| // @ts-ignore |
There was a problem hiding this comment.
Using @ts-ignore suppresses TypeScript checking. Consider extending the HTMLElement interface or using a WeakMap to store context data instead of attaching it directly to DOM elements.
Copilot uses AI. Check for mistakes.
| // className 变化需要替换 | ||
| if (prev.className !== next.className) { | ||
| if (prev.className) el.classList.remove(prev.className); | ||
| if (!next.disabledHover && next.className && el.matches(':active')) { |
There was a problem hiding this comment.
Using :active pseudo-class may not work reliably for touch devices. The hover directive is designed for touch interactions, but :active behaves differently across touch and pointer devices.
| if (!next.disabledHover && next.className && el.matches(':active')) { | |
| if (!next.disabledHover && next.className) { |
Copilot uses AI. Check for mistakes.
commit: |
|
|
🤔 这个 PR 的性质是？
🔗 相关 Issue
💡 需求背景和解决方案
📝 更新日志
fix(组件名称): 处理问题或特性描述 ...
本条 PR 不需要纳入 Changelog
☑️ 请求合并前的自查清单