plan-view-annotation-vue3 v1.0.0

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
};