准星

Crosshair 一个全屏的鼠标跟随组件，会在屏幕上绘制垂直和水平的交叉线，并显示当前的坐标值。

免责声明与致谢 本组件主要用于演示、装饰或特定的视觉效果场景，无实际业务功能用途。

• 灵感来源: 本组件的设计与概念参考了 Vue Data UI 中的同类组件。
• 开发说明: 本组件代码逻辑由 AI 辅助生成。

基础用法

TuiCrosshair 通常直接放置在页面根节点或全屏容器中。默认情况下，它会显示一个圆角的矩形瞄准框，并实时显示鼠标的 X/Y 坐标。

<template>
  <div style="height: 100vh; position: relative;">
    <TuiCrosshair />
  </div>
</template>

视觉定制

组件提供了丰富的属性来调整准星的外观，包括线条粗细、透明度以及中心瞄准区域的形状。

瞄准框形状 (Scope Shape)

通过 scopeShape 属性切换中心区域的形状：

• rect: 圆角矩形 (默认)
• circle: 圆形

线条样式

• lineStroke: 控制十字线的粗细。
• lineOpacity: 控制十字线的透明度。

<template>
  <TuiCrosshair 
    scopeShape="circle" 
    :lineStroke="0.1" 
    :lineOpacity="0.5"
    :crosshairRadius="60"
  />
</template>

功能配置

坐标显示 (Coordinates)

通过 coordinates 属性控制是否显示鼠标当前的 X/Y 坐标数值。

瞄准点模式 (Aiming Point)

aimingPoint 属性控制中心点的对齐或渲染逻辑：

• center: 标准居中模式。
• side: 侧边偏移模式。

<template>
  <TuiCrosshair :coordinates="false" />
</template>

API 参考

Props

属性名	说明	类型	可选值	默认值
crosshairRadius	中心瞄准区域的半径/大小 (px)	Number	—	40
lineStroke	十字线条的粗细 (px)	Number	—	0.2
lineOpacity	十字线条的透明度 (0-1)	Number	—	1
scopeShape	中心瞄准框的形状	String	'rect', 'circle'	'rect'
aimingPoint	瞄准点的对齐模式	String	'center', 'side'	'center'
coordinates	是否显示实时坐标数值	Boolean	—	true