使用说明：
@@ -698,35 +776,64 @@ function RectMaskDemo(): JSX.Element {
// NativeDiv 演示组件
function NativeDivDemo(): JSX.Element {
- const [events, setEvents] = useState
>([]);
+ const [events, setEvents] = useState>([]);
+ const [wheelValue, setWheelValue] = useState(0);
- const addEvent = (type: string, e: MouseEvent) => {
+ const addEvent = (type: string, details: string) => {
const newEvent = {
type,
time: new Date().toLocaleTimeString(),
- position: `(${e.clientX}, ${e.clientY})`
+ details
};
- setEvents(prev => [newEvent, ...prev].slice(0, 5));
+ setEvents(prev => [newEvent, ...prev].slice(0, 10));
};
const handleNativeMouseEnter = (e: MouseEvent) => {
- addEvent('mouseenter', e);
+ addEvent('mouseenter', `位置：(${e.clientX}, ${e.clientY})`);
};
const handleNativeMouseMove = (e: MouseEvent) => {
- addEvent('mousemove', e);
+ addEvent('mousemove', `位置：(${e.clientX}, ${e.clientY})`);
};
const handleNativeMouseLeave = (e: MouseEvent) => {
- addEvent('mouseleave', e);
+ addEvent('mouseleave', `位置：(${e.clientX}, ${e.clientY})`);
};
const handleNativeMouseDown = (e: MouseEvent) => {
- addEvent('mousedown', e);
+ addEvent('mousedown', `位置：(${e.clientX}, ${e.clientY})`);
};
const handleNativeClick = (e: MouseEvent) => {
- addEvent('click', e);
+ addEvent('click', `位置：(${e.clientX}, ${e.clientY})`);
+ };
+
+ const handleNativeKeyDown = (e: KeyboardEvent) => {
+ addEvent('keydown', `按键：${e.key}，键码：${e.keyCode}，修饰键：${[
+ e.ctrlKey && 'Ctrl',
+ e.shiftKey && 'Shift',
+ e.altKey && 'Alt',
+ e.metaKey && 'Meta'
+ ].filter(Boolean).join('+') || '无'}`);
+ };
+
+ const handleNativeKeyUp = (e: KeyboardEvent) => {
+ addEvent('keyup', `按键：${e.key}，键码：${e.keyCode}，修饰键：${[
+ e.ctrlKey && 'Ctrl',
+ e.shiftKey && 'Shift',
+ e.altKey && 'Alt',
+ e.metaKey && 'Meta'
+ ].filter(Boolean).join('+') || '无'}`);
+ };
+
+ const handleNativeMouseWheel = (e: WheelEvent) => {
+ e.preventDefault();
+ const delta = e.deltaY;
+ setWheelValue(prev => {
+ const newValue = prev + delta;
+ addEvent('mousewheel', `滚动值：${newValue}，增量：${delta}`);
+ return newValue;
+ });
};
return (
@@ -734,21 +841,59 @@ function NativeDivDemo(): JSX.Element {
原生 Div 事件演示
- 与我互动！
+
+
与我互动！
+
+ 点击获取焦点
+
+ 然后按键盘或滚动鼠标
+
+
+ 滚动值：{wheelValue.toFixed(0)}
+
+
最近的事件：
-
+
{events.map((event, index) => (
- -
- {event.type} - 时间：{event.time} - 位置：{event.position}
+
-
+ {event.type} - {event.time}
+
+ {event.details}
))}
@@ -761,13 +906,384 @@ function NativeDivDemo(): JSX.Element {
- 在方块内移动鼠标来触发 mousemove 事件
- 将鼠标移出方块来触发 mouseleave 事件
- 点击方块来触发 click 事件
- - 所有事件都会显示在下方的列表中，包括触发时间和鼠标位置
+ - 点击方块获取焦点后，按下键盘按键来触发 keydown 和 keyup 事件
+ - 在方块上滚动鼠标滚轮来旋转方块，并触发 mousewheel 事件
+ - 所有事件都会显示在下方的列表中，包括：
+
+ - 事件类型和触发时间
+ - 鼠标事件：鼠标位置坐标
+ - 键盘事件：按键名称、键码和修饰键状态
+ - 滚轮事件：滚动值和增量
+
);
}
+// 添加 SideToolBar 演示组件
+function SideToolBarDemo(): JSX.Element {
+ const [count, setCount] = useState(0);
+ const [selectedToolId, setSelectedToolId] = useState