aida_front/src/component/Detail/addDetails.vue

<template>
	<div class="addDetailsModal generalModel" ref="addDetailsModal"></div>
    <a-modal
        class="addDetails_modal generalModel fullScreen"
        v-model:visible="addDetails"
        :footer="null"
		:get-container="() => $refs.addDetailsModal"
		width="100%"
		height="100%"
        :maskClosable="false"
        :centered="true"
        :closable="false"
		:destroyOnClose="true"
        wrapClassName="#app"
        :keyboard="false"
		:mask="false"
    >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="100%" height="100%" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
						<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
						<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="#000"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="#000"/>
					</svg>

			</div>
		</div>
		
		<div class="addDetails_center">
			<generalMiniCanvas :imgUrl="imgUrl" @submitBase64Data="submitBase64Data"></generalMiniCanvas>
		</div>
		<div></div>
    </a-modal>
</template>
<script>
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
import generalMiniCanvas from "../modules/generalMiniCanvas.vue";
export default defineComponent({
    components: {
		generalMiniCanvas,
    },
	emits: ['setSloganData'],
    setup(props,{emit}) {
        let addDetail = reactive({
			imgUrl:''
		});
        let addDetails = ref(false);
		let init = (data,index)=>{
			addDetails.value = true
			addDetail.imgUrl = data.sketchString || data.path
        }
		let submitBase64Data = (data)=>{
			emit('setSloganData',data)
			cancelDsign()
		}
		let cancelDsign = ()=>{
			addDetails.value = false
		}
        return {
			...toRefs(addDetail),
			addDetails,
			init,
			submitBase64Data,
			cancelDsign,
        };
    },
    data() {
        return {
        };
    },
    mounted() {},
    methods: {
       
    },
});
</script>
<style lang="less" scoped>
.addDetailsModal{
	width: 0;
	height: 0;
}
.addDetails_modal {
    .closeIcon {
        z-index: 2;
    }
	.addDetails_center{
		position: relative;
		height: 100%;
		display: flex;
		flex-direction: column;
		margin: 0 auto;
	}
	.exportCanvasBox_submit{
		// margin-top: 2.4rem;
		// text-align: center;
	}
}
</style>