65 lines
2.0 KiB
HTML
65 lines
2.0 KiB
HTML
<!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>
|