<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
.preview-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.preview-container img {
max-height: 80vh;
}
</style>
</head>
<body>
<div id="app" class="h-100vh flex justify-center items-center">
<div class="image-preview" v-if="showPreview">
<div class="overlay"></div>
<i
class="el-icon-download cursor-pointer fixed text-40px top-40px right-90px"
@click="changeImage('download')"
></i>
<i
class="el-icon-circle-close cursor-pointer fixed text-40px top-40px right-40px"
@click="changeImage('change')"
></i>
<div
class="w-40px h-40px bg-#67686c cursor-pointer rounded-full flex justify-center items-center fixed left-40px"
@click="changeImage('prev')"
>
<i class="el-icon-arrow-left text-#fff text-30px"></i>
</div>
<div
class="w-40px h-40px bg-#67686c cursor-pointer rounded-full flex justify-center items-center fixed right-40px"
@click="changeImage('next')"
>
<i class="el-icon-arrow-right text-#fff text-30px"></i>
</div>
<div class="preview-container">
<img :src="imageUrl" alt="Preview Image" />
</div>
</div>
<div class="thumbnail-container">
<img
v-for="(image, index) in images"
:key="index"
:src="image"
class="h-200px w-200px"
@click="showImage(index)"
/>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
showPreview: false,
currentIndex: 0,
images: [
'https://image.qwq.link/images/2023/11/24/twitter_zuukyuudo9_20231123-001852_1727481805832642619_photo.md.jpg',
'https://image.qwq.link/images/2023/11/24/109626211_p0.md.jpg',
'https://image.qwq.link/images/2023/11/24/113276508_p0.md.jpg',
],
};
},
computed: {
imageUrl() {
return this.images[this.currentIndex];
},
},
methods: {
showImage(index) {
this.currentIndex = index;
this.showPreview = true;
},
changeImage(type) {
const Fn = {
prev: () => {
if (this.currentIndex > 0) {
this.currentIndex--;
} else {
this.currentIndex = this.images.length - 1;
}
},
next: () => {
if (this.currentIndex < this.images.length - 1) {
this.currentIndex++;
} else {
this.currentIndex = 0;
}
},
download: () => {
var a = document.createElement('a');
a.download = this.imageUrl || 'pic';
a.href = this.imageUrl;
a.click();
},
change: () => {
this.showPreview = !this.showPreview;
},
};
Fn[type]();
},
},
created() {
},
});
</script>
</body>
</html>
![<span style='color:red;'>vue</span><span style='color:red;'>2</span><span style='color:red;'>实现</span>字节流byte[]数组的<span style='color:red;'>图片</span><span style='color:red;'>预</span><span style='color:red;'>览</span>](https://img-blog.csdnimg.cn/direct/5d5716c817b54b01b8d7e4ea7e9c9665.png#pic_center)
