# plan-view-annotation-vue3

**Repository Path**: xjmroot/plan-view-annotation-vue3

## Basic Information

- **Project Name**: plan-view-annotation-vue3
- **Description**: 平面图点标记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-11-20
- **Last Updated**: 2024-11-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# plan-view-annotation-vue3

```
平面图标记点,基于vue3+ts开发
```

## 安转方式

```
yarn add plan-view-annotation-vue3

或

npm i plan-view-annotation
```

## 引入方式

```
import planView from "plan-view-annotation-vue3";
```

## 页面使用方式

```
<plan-view
  @dblclick="dbAddclick"
  @rigthRemoveClick="rigthRemoveClick"
  :data="data"
  :configuration="configuration"
>
  <!-- 内容自定义 -->
  <template v-slot:content="content">
  </template>
</plan-view>
```

## 数据以及方法

```
// 数据格式
type TPlanView = {
  content?: any;
  x: number | string;
  y: number | string;
};

// 数据
const data = reactive<TPlanView[]>([]);

// 需要的配置
const configuration = reactive({
  // 内容块宽高
  width: 100,
  height: 80,
  // 是否展示内容块
  contentShow: true,
  // 内容背景颜色
  contentBackground: "red",
  // 标点颜色
  titleBackground: "skyblue",
  // 背景图片
  imgUrl:
    "",
});

// 双击添加标点事件
const dbAddclick = (item: any) => {
  // 返回的是位置坐标:x,y

};
// 右击删除事件
const rigthRemoveClick = (item: TPlanView, index: number) => {
  // 返回的是当前的删除对象,以及删除的下标:index
};
```