iter(g139): 提示气泡支持左右方位
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { effect, h, signal } from '@ui-arch/frame';
|
||||
import type { TooltipProps } from './types.js';
|
||||
import { flip } from './position.js';
|
||||
import { flipSide } from './position.js';
|
||||
|
||||
let seq = 0; // 全局自增序号:保证每个气泡 id 唯一,供 aria-describedby 关联
|
||||
|
||||
@@ -8,7 +8,7 @@ let seq = 0; // 全局自增序号:保证每个气泡 id 唯一,供 aria-des
|
||||
export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement {
|
||||
// —— 状态集中声明 ——
|
||||
const open = signal(false); // 气泡显隐
|
||||
const place = signal(props.placement ?? 'top'); // 实际生效方位:出场时按视口空间自动翻转
|
||||
const place = signal<'top' | 'bottom' | 'left' | 'right'>(props.placement ?? 'top'); // 实际生效方位:出场时按视口空间自动翻转
|
||||
const id = `ua-tip-${++seq}`; // 气泡唯一 id
|
||||
const delay = props.delay ?? 150; // 出场延迟毫秒;<=0 视为立即显示
|
||||
let timer: number | null = null; // 出场延迟计时器句柄
|
||||
@@ -64,7 +64,7 @@ export function tooltip(props: TooltipProps, trigger: HTMLElement): HTMLElement
|
||||
// —— 触摸屏:没有 hover,改点按。按下即出(不等 150ms),抬手留 1.2s 再收,否则手指正挡着气泡就没了 ——
|
||||
root.addEventListener('pointerdown', (e: PointerEvent) => { if (e.pointerType === 'touch') show(); });
|
||||
root.addEventListener('pointerup', (e: PointerEvent) => { if (e.pointerType === 'touch') hideLater(); });
|
||||
effect(() => { if (open()) place(flip(trigger, bubble, props.placement ?? 'top')); }); // 每次出场重算方位:空间不足自动翻转
|
||||
effect(() => { if (open()) place(flipSide(trigger, bubble, props.placement ?? 'top')); }); // 每次出场重算方位:空间不足自动翻转
|
||||
root.addEventListener('keydown', (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') { e.stopPropagation(); hide(); } // Esc 立即收起且不影响外层弹层
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user