OnlineEducation-student-front/src/components/MiniYun/index.vue

<template>
	<div style="width: 100px;  height: 100%; display: flex; justify-content: center;  align-items: center;  cursor: pointer ; " >
		<div class="shake-animation"  v-if="fileForms && fileForms.length > 0" style="padding: 5px" @click="onOpenMiniForm">
			<span  style="display: block"  >上传任务管理</span>
		</div>

		<ResourceUpload ref="resourceUploadRef"></ResourceUpload>
		<MiniForm ref="miniFormRef"></MiniForm>
	</div>

</template>
<script setup>
import ResourceUpload from './resourceUpload.vue'
import MiniForm from './miniForm.vue'
import EventBus from "@/utils/EventBus";

const resourceUploadRef = ref(null)
const miniFormRef = ref(null)
import { miniyunStore } from '@/store/miniyun'
import {storeToRefs} from "pinia";
const myMiniyunStore = miniyunStore()
// 使用 storeToRefs 保持响应性
const { getFileForms ,getPauseFlags} = storeToRefs(myMiniyunStore)

// getFileModel 保持了与 store 的响应式连接
const fileForms = computed({
	get: () => getFileForms.value
})
const pauseFlags = computed({
	get: () => getPauseFlags.value
})

const onOpenList = () => {
	// console.log('打开上传资源')
	// resourceUploadRef.value.open()

}
const onOpenMiniForm = () => {
	miniFormRef.value.open()
}
const openMiniYun = (teacherData) => {
	resourceUploadRef.value.open(teacherData)
}
onMounted(() => {

})
EventBus.off('openMiniYun',openMiniYun)
EventBus.on('openMiniYun',openMiniYun)
</script>


<style scoped>
.shake-animation {
	animation: scaleAndShake 3s infinite;
}

.shake-animation span {
	animation: textColorChange 3s infinite;
}

@keyframes scaleAndShake {
	0% {
		transform: scale(1);
	}
	30% {
		transform: scale(0.8);
	}
	40%, 50%, 60%, 70%, 80% {
		transform: scale(0.8) translateX(3px);
	}
	45%, 55%, 65%, 75% {
		transform: scale(0.8) translateX(-3px);
	}
	85% {
		transform: scale(0.8);
	}
	100% {
		transform: scale(1);
	}
}

@keyframes textColorChange {
	0% {
		color: #333;
	}
	30% {
		color: #409eff;
	}
	85% {
		color: #409eff;
	}
	100% {
		color: #333;
	}
}
</style>