tui-image-editor在vue文件中使用

要在Vue文件中使用tui-image-editor，你需要先安装tui-image-editor的npm包。在终端中运行以下命令：

npm install --save tui-image-editor

安装完成后，在Vue组件中引入该包并使用即可。例如：

<template>
  <div>
    <div ref="tuiContainer"></div>
    <button @click="saveImage">保存图片</button>
  </div>
</template>

<script>
import ImageEditor from 'tui-image-editor';

export default {
  mounted() {
    const tuiContainer = this.$refs.tuiContainer;
    const imageEditor = new ImageEditor(tuiContainer, {
      includeUI: {
        loadImage: {
          path: 'https://example.com/image.jpg',
          name: 'example'
        },
        theme: blackTheme,
        initMenu: 'filter',
        menuBarPosition: 'bottom'
      },
      cssMaxWidth: 700,
      cssMaxHeight: 500,
      selectionStyle: {
        cornerSize: 20,
        rotatingPointOffset: 70
      }
    });
    this.imageEditor = imageEditor;
  },
  methods: {
    saveImage() {
      this.imageEditor.saveAsDataURL();
    }
  }
}
</script>

这里我们在组件的 `mounted` 钩子函数中创建了一个ImageEditor实例，并传入一个DOM容器和配置项。通过 `$refs` 获取容器DOM元素的引用，初始化ImageEditor实例后将其保存在Vue组件实例的 `imageEditor` 属性中，方便后续调用。我们可以在模板中添加一个按钮，点击后调用 `saveAsDataURL` 方法将编辑后的图片以DataURL的形式保存。