KLCrosshair

考拉十字辅助线组件

效果

<script setup lang="ts">
import { ref } from 'vue';
const height = 400;
const point = ref({ x: 100, y: height / 2 });
const lock = ref(false);
</script>

<template>
  <div class="relative" :style="{ height: height + 'px', background: '#ccc', }">
    <KLCrosshair :coor="point" color="#f00" :lock="lock" />
    <KLButton :content="lock ? '解锁辅助线' : '固定辅助线'" @click="lock = !lock" />
  </div>
</template>

Attributes

属性	说明	类型	默认值
coor	辅助线坐标	{x: number, y: number}	-
color	辅助线颜色	string	-
lock	是否固定辅助线（此时拖拽辅助线事件失效）	boolean	false