aida_front/src/component/Detail/addDetails.vue

<template>
    <a-modal
        class="addDetails_modal generalModel"
        v-model:visible="addDetails"
        :footer="null"
        width="50%"
        :maskClosable="false"
        :centered="true"
        :closable="false"
        wrapClassName="#app"
        :keyboard="false"
    >
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<i class="fi fi-rr-cross-small"></i>
			</div>
		</div>
		
		<div class="addDetails_center">
			<div class="modal_title_text">
				<div>{{ $t('addDetails.AddDetails') }}</div>
				<div class="modal_title_text_intro"></div>
			</div>
			<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.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">
.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>