Files
aida_front/src/component/Detail/addDetails.vue
2025-08-22 10:27:48 +08:00

98 lines
2.4 KiB
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>