Crosshair

Crosshair is a full-screen mouse-following component that draws vertical and horizontal intersecting lines on the screen and displays current coordinate values.

Disclaimer and Acknowledgments This component is primarily intended for demonstration, decoration, or specific visual effect scenarios and has no actual business functional utility.

• Source of Inspiration: The design and concept of this component are referenced from similar components in Vue Data UI.
• Development Note: The code logic for this component was generated with the assistance of AI.

Basic Usage

TuiCrosshair is typically placed directly at the root node of a page or within a full-screen container. By default, it displays a rounded rectangular aiming box and shows the mouse's X/Y coordinates in real-time.

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

Visual

The component provides a rich set of attributes to adjust the appearance of the crosshair, including line thickness, opacity, and the shape of the central aiming area.

Scope Shape

Toggle the shape of the central area via the scopeShape attribute:

• rect: Rounded rectangle (default)
• circle: Circle

Line Styles

• lineStroke: Controls the thickness of the crosshair lines.
• lineOpacity: Controls the opacity of the crosshair lines.

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

Functional Configuration

Coordinates

Control whether to display the current X/Y coordinate values of the mouse via the coordinates attribute.

Aiming Point Mode

The aimingPoint attribute controls the alignment or rendering logic of the center point:

• center: Standard centered mode.
• side: Side offset mode.

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

API Reference

Props

Property	Description	Type	Accepted Values	Default
crosshairRadius	Radius/size of the central aiming area (px)	Number	—	40
lineStroke	Thickness of the crosshair lines (px)	Number	—	0.2
lineOpacity	Opacity of the crosshair lines (0-1)	Number	—	1
scopeShape	Shape of the central aiming box	String	'rect', 'circle'	'rect'
aimingPoint	Alignment mode of the aiming point	String	'center', 'side'	'center'
coordinates	Whether to display real-time coordinate values	Boolean	—	true