# plan-view-annotation-vue3

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

Latest version **1.0.0** (published 2022-11-06) · 0 weekly downloads

## Install

```sh
npm install plan-view-annotation-vue3
pnpm add plan-view-annotation-vue3
yarn add plan-view-annotation-vue3
bun add plan-view-annotation-vue3
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-11-06 |
| First published | 2022-11-06 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 11.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | codehuaiya |

## Links

- npm: https://www.npmjs.com/package/plan-view-annotation-vue3
- npm.io page: https://npm.io/package/plan-view-annotation-vue3

## Dependencies (4)

- [i](https://npm.io/package/i.md) ^0.3.7
- [vue](https://npm.io/package/vue.md) ^3.2.41
- [plan-view-annotation-vue3](https://npm.io/package/plan-view-annotation-vue3.md) ^0.0.2
- [vite-plugin-vue-setup-extend](https://npm.io/package/vite-plugin-vue-setup-extend.md) ^0.4.0

## Recent versions

- 1.0.0 (latest) — 2022-11-06
- 0.0.2 — 2022-11-06
- 0.0.1 — 2022-11-06
- 0.0.0 — 2022-11-06

## 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:"",
// 初始化时是否显示全部
  allContentShow:true
});

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

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

---
_Source: https://npm.io/package/plan-view-annotation-vue3 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._