一、项目准备

在开始之前，我们需要确保项目中已经安装了Vue和相关依赖。以下是一个基本的Vue项目结构：

src/
|-- assets/
|   |-- images/        # 存放图片资源
|-- components/
|   |-- ImageLabel.vue # 图片标注组件
|-- App.vue
|-- main.js

二、图片标注组件设计

1. 组件结构

<template>
  <div class="image-label">
    <img :src="imageUrl" alt="Image" @click="showEditor" />
    <div v-if="showEditorFlag" class="editor">
      <!-- 标注编辑器 -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    imageUrl: String
  },
  data() {
    return {
      showEditorFlag: false,
      // 其他数据
    };
  },
  methods: {
    showEditor() {
      this.showEditorFlag = true;
      // 初始化编辑器
    },
    // 其他方法
  }
};
</script>

<style scoped>
.image-label img {
  width: 100%;
  height: auto;
}
.editor {
  /* 编辑器样式 */
}
</style>

2. 标注编辑器

import "tui-image-editor/dist/tui-image-editor.css";
import ImageEditor from "tui-image-editor";

export default {
  // ...
  methods: {
    showEditor() {
      this.showEditorFlag = true;
      const instance = new ImageEditor(document.querySelector(".editor"), {
        includeUI: {
          // UI配置
        },
        // 其他配置
      });
      // 初始化编辑器
    },
    // ...
  }
};
</script>

3. 保存标注

当用户完成标注后，我们需要将标注数据保存到服务器或本地存储。以下是一个简单的保存方法：

methods: {
  saveAnnotation(annotationData) {
    // 将标注数据发送到服务器或保存到本地存储
  },
  // ...
}

三、使用组件

在 App.vue 或其他页面中，你可以这样使用 ImageLabel 组件：

<template>
  <div id="app">
    <image-label :image-url="imageUrl" @save-annotation="saveAnnotation" />
  </div>
</template>

<script>
import ImageLabel from "./components/ImageLabel.vue";

export default {
  components: {
    ImageLabel
  },
  data() {
    return {
      imageUrl: "path/to/your/image.jpg"
    };
  },
  methods: {
    saveAnnotation(annotationData) {
      // 处理标注数据
    }
  }
};
</script>

四、总结