feat: tui-image-editor 使用

src/views/demo/tuiImageEditor/components/image-editor.vue

@@ -0,0 +1,7 @@
+<template>
+    <div>123</div>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+</script>

src/views/demo/tuiImageEditor/index.vue

@@ -0,0 +1,32 @@
+<template>
+    <base-container>
+        <h2 class="pt-5 pb-5">tui-image-editor使用教程</h2>
+        <el-button
+            type="primary"
+            style="width: 200px"
+            @click="openImageEditor"
+            >点击打开图片标注
+        </el-button>
+        <imageEditor
+            v-if="showImageEditor"
+            @close="showImageEditor = false"
+            :imgUrl="imgUrl"
+        />
+    </base-container>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+import ImageEditor from './components/image-editor.vue';
+
+defineOptions({
+    name: 'TuiImageEditor',
+});
+
+const showImageEditor = ref(false);
+const imgUrl = ref('');
+
+const openImageEditor = () => {
+    showImageEditor.value = true;
+};
+</script>