1 line
2.9 KiB
Plaintext
1 line
2.9 KiB
Plaintext
{"version":3,"file":"LoadingAnimation.js","sources":["../../../../src/components/LoadingAnimation.vue","../../../../uniComponent:/RDovQXBwL1dvcmsvYWRkci9hY2RyLXVpL3NyYy9jb21wb25lbnRzL0xvYWRpbmdBbmltYXRpb24udnVl"],"sourcesContent":["<template>\n <wd-overlay :show=\"modelValue\">\n <view class=\"flex flex-col items-center justify-center content-center w-full h-full\">\n <view class=\"loading-animation\">\n <view\n v-for=\"color in colors\"\n :key=\"color\"\n :style=\"{ backgroundColor: color }\"\n class=\"ball\"\n ></view>\n </view>\n </view>\n </wd-overlay>\n</template>\n\n<script setup>\nimport { defineProps } from 'vue'\n\nconst props = defineProps({\n modelValue: Boolean,\n timeout: {\n // 添加timeout属性来控制加载时间\n type: Number,\n default: 5000, // 默认5秒后自动关闭\n },\n})\n\nconst emit = defineEmits(['update:modelValue'])\n\nlet timer = null\n\nconst colors = ['#FF6347', '#4682B4', '#32CD32', '#FFD700', '#FF69B4', '#00FA9A']\n\n// 定时器函数，超过指定时间自动关闭加载界面\nconst startTimeout = () => {\n clearTimeout(timer)\n timer = setTimeout(() => {\n stopLoading() // 超时后关闭加载\n }, props.timeout)\n}\n\nconst stopLoading = () => {\n // 触发关闭加载的逻辑，可以通过 emit 事件或者父组件控制\n clearTimeout(timer)\n emit('update:modelValue', false)\n}\n\nonLoad(() => {\n // 开始加载时启动定时器\n startTimeout()\n})\n\nonUnload(() => {\n // 清理定时器，防止内存泄漏\n clearTimeout(timer)\n})\n</script>\n\n<style scoped>\n.loading-animation {\n display: flex;\n gap: 5px;\n justify-content: space-around;\n width: 100px;\n}\n\n.ball {\n width: 15px;\n height: 15px;\n border-radius: 50%;\n animation: bounce 1.2s infinite ease-in-out;\n}\n\n.ball:nth-child(1) {\n animation-delay: -0.32s;\n}\n.ball:nth-child(2) {\n animation-delay: -0.16s;\n}\n.ball:nth-child(3) {\n animation-delay: -0.13s;\n}\n.ball:nth-child(4) {\n animation-delay: -0.07s;\n}\n.ball:nth-child(5) {\n animation-delay: -0.04s;\n}\n.ball:nth-child(6) {\n animation-delay: 0s;\n}\n\n@keyframes bounce {\n 0%,\n 80%,\n 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n}\n</style>\n","import Component from 'D:/App/Work/addr/acdr-ui/src/components/LoadingAnimation.vue'\nwx.createComponent(Component)"],"names":["onLoad","onUnload"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkBA,UAAM,QAAQ;AASd,UAAM,OAAO;AAEb,QAAI,QAAQ;AAEZ,UAAM,SAAS,CAAC,WAAW,WAAW,WAAW,WAAW,WAAW,SAAS;AAGhF,UAAM,eAAe,MAAM;AACzB,mBAAa,KAAK;AAClB,cAAQ,WAAW,MAAM;AACvB,oBAAa;AAAA,MACjB,GAAK,MAAM,OAAO;AAAA,IAClB;AAEA,UAAM,cAAc,MAAM;AAExB,mBAAa,KAAK;AAClB,WAAK,qBAAqB,KAAK;AAAA,IACjC;AAEAA,kBAAAA,OAAO,MAAM;AAEX,mBAAc;AAAA,IAChB,CAAC;AAEDC,kBAAAA,SAAS,MAAM;AAEb,mBAAa,KAAK;AAAA,IACpB,CAAC;;;;;;;;;;;;;;;;;ACtDD,GAAG,gBAAgB,SAAS;"} |