710

2025-07-10 10:54:10 +08:00
parent 5d1f29d18d
commit 9d5870b37b
60 changed files with 1794 additions and 159 deletions
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AniEle 组件测试</title>
+</head>
+<body>
+    <div id="app">
+        <h1>AniEle 组件测试</h1>
+        <div>
+            <label>ZIP文件URL:</label>
+            <input v-model="zipUrl" type="text" placeholder="输入包含图片序列的ZIP文件URL" style="width: 400px;">
+            <button @click="loadImages">加载</button>
+        </div>
+        <br>
+        <AniEle :url="currentUrl" ref="aniEleRef" />
+        <div v-if="aniEleRef?.images.length > 0">
+            <h3>加载的图片预览:</h3>
+            <div style="display: flex; flex-wrap: wrap; gap: 10px;">
+                <img 
+                    v-for="(imgUrl, index) in aniEleRef.images.slice(0, 5)" 
+                    :key="index"
+                    :src="imgUrl" 
+                    :alt="`Frame ${index}`"
+                    style="width: 100px; height: 100px; object-fit: cover; border: 1px solid #ccc;"
+                />
+                <div v-if="aniEleRef.images.length > 5" style="display: flex; align-items: center; padding: 10px;">
+                    ...还有 {{ aniEleRef.images.length - 5 }} 张图片
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script type="module">
+        import { createApp, ref } from 'vue'
+        import AniEle from './src/components/AniEle.vue'
+
+        const app = createApp({
+            components: {
+                AniEle
+            },
+            setup() {
+                const zipUrl = ref('')
+                const currentUrl = ref('')
+                const aniEleRef = ref(null)
+
+                const loadImages = () => {
+                    currentUrl.value = zipUrl.value
+                }
+
+                return {
+                    zipUrl,
+                    currentUrl,
+                    aniEleRef,
+                    loadImages
+                }
+            }
+        })
+
+        app.mount('#app')
+    </script>
+</body>
+</html>