2024年06月15日 建站教程
1、在HTML中创建Vue组件的容器
<div id="thumbnail-app"> <thumbnail :images="images"></thumbnail> </div>
2、在JavaScript中编写Vue组件：
Vue.component('thumbnail', {
props: ['images'],
template: `
<div>
<div v-for="image in images" :key="image.id">
<img :src="/staticimage.url" @click="showThumbnail(image)"/>
<div class="thumbnail" v-if="selectedImage === image">
<img :src="/staticselectedImage.url" @click="closeThumbnail"/>
</div>
</div>
</div>
`,
data() {
return {
selectedImage: null
}
},
methods: {
showThumbnail(image) {
this.selectedImage = image;
},
closeThumbnail() {
this.selectedImage = null;
}
}
});
new Vue({
el: '#thumbnail-app',
data() {
return {
images: [
{ id: 1, url: 'images/pics1.jpg' },
{ id: 2, url: 'images/pics2.jpg' },
{ id: 3, url: 'images/pics3.jpg' },
{ id: 4, url: 'images/pics4.jpg' }
]
}
}
});
CSS样式：
.thumbnail {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: #fff;
z-index: 9999;
overflow: auto;
padding: 20px;
}
.thumbnail img {
display: block;
margin: 0 auto;
max-width: 100%;
max-height: 100%;
}
本文链接：http://so.lmcjl.com/news/6616/