@alicloud/console-base-rc-attention-seeker
Usage
一般不建议直接用组件的形式调用,而是通过 append、prepend、refresh、clear 等方法。
建议对需要提示用户关注的地方单独写一个组件,如下,注意 ref 必须是 HTML 元素。
import React, {
useRef,
useEffect
} from 'react';
import {
append
} from '@alicloud/console-base-rc-attention-seeker';
export default function PickMe(): JSX.Element {
const refSpan = useRef<HTMLSpanElement | null>(null);
useEffect(() => {
if (refSpan.current) {
return append(refSpan.current);
}
}, []);
return <span ref={refSpan}>and i will get the attention</span>;
}
API
TODO 目前没有上一个下一个...
default export - 组件
基本用不到
append(element: HTMLElement, options?: IAttentionSeekerOptions): () => void;
将元素添加到元素列表,返回解除的无参回调函数可用于 useEffect。
prepend(element: HTMLElement, options?: IAttentionSeekerOptions): () => void
将元素添加到元素列表(如果希望添加后立即高亮,用它),返回解除的无参回调函数可用于 useEffect。
clear(): void
清除所有元素。
refresh(): void
刷新(基本应该用不到了)。
关于背投
我们要达到这样的效果:
- 有背投
- 关注元素需要跳出背投
简言之,便是需要有「镂空」背投。
最早的设计是这样的:
- 背投为实心的 div,绝对定位,占满全屏,以高
z-index
压住页面 - 镂空的实现是将关注元素的
z-index
调整为高于背投的z-index
让它「浮」上来
问题 I
但这有个问题:当关注元素的祖先节点有「生效的」z-index
的时候,变无法上提,这里有个 Stacking Context 的概念。
这个问题的解法比较恶心,但可行,就是逐个把含 z-index
的祖先的 z-index
设置为 auto !important
,当然后边会还原。
问题 II
解决了问题 I 之后,发现了另外一个问题:虽然祖先节点的 z-index
都已实现救赎,但还是有些元素无法浮上来:祖先元素的定位为 sticky
、fixed
的时候,甚至会因为去掉了 z-index
,而导致这些祖先元素中的其他节点无法展示。
这个问题的原因我没有细究,也不想细究。