<template>
	<div ref="modalTest"></div>
    <a-modal class="modal_test generalModel" 
		v-model:visible="testModal" 
		:footer="null" 
		:get-container="() => $refs.modalTest"
		width="78%"
		:maskClosable="false"
		:centered="true"
		:closable="false"
		wrapClassName="#app"
		:keyboard="false"
	>
		<div class="generalModel_btn">
			<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
				<svg width="46" height="46" 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="white"/>
						<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
					</svg>

			</div>
		</div>
		<canvasIndex></canvasIndex>
    </a-modal>
</template>

<script lang="ts">
	import { defineComponent,ref,createVNode,nextTick} from 'vue'
	import canvasIndex from './index.vue'
	export default defineComponent({
		components:{canvasIndex},
		setup(){
		    let testModal = ref(true)
			const init = ()=>{
				testModal.value = true
			}
			const cancelDsign = ()=>{
				testModal.value = false
			}
			return {
				testModal,
				init,
				cancelDsign,
			}
		}
	});
</script>

<style lang='less' scoped>
.box {
    border: 1px solid #f00;
}
</style>