xiaoshu/src/components/image-editor/ImgEditBtn.vue

<template>
  <a-button @click="handleClick" class="image-edit-btn">
    编辑图片
  </a-button>

  <a-modal v-model:visible="visible" @ok="handleOk" @cancel="handleCancel" modal-class="image-editor-modal" body-class="image-editor-body" width="70%">
    <template #title>
      编辑图片
    </template>
    
    <div style="padding:20px; height: 100%;">
      <TuiImageEditor :image_url="image_url" />
    </div>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import logo from '../../assets/images/comfyui-logo.png'

import TuiImageEditor from './TuiImageEditorVue3.vue';

const props = defineProps({
  image_url: String
});

const visible = ref(false);

const handleClick = () => {
    visible.value = true;
};
const handleOk = () => {
    visible.value = false;
};
const handleCancel = () => {
    visible.value = false;
}
</script>

<style scoped>
.image-edit-btn{
  width: 100px;
  border-radius: 30px;
  color: #353535;
}
</style>

<style>
.image-editor-modal{

}

.arco-modal-body.image-editor-body{
    width: 100%;
    /* height: 900px; */
    height: 840px;
    /* height: 80vh; */
    padding: 0;
}

.tui-image-editor-submenu-item > li > .tui-image-editor-button > div > .tie-mask-image-file {
    display: block !important;
}
</style>