Vue.js實(shí)現(xiàn)九宮格圖片展示模塊
更新時(shí)間：2021年10月20日 14:28:06 作者：前端學(xué)習(xí)賬號(hào)
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)九宮格圖片展示模塊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
用Vue.js做了一個(gè)九宮格圖片展示模塊，可點(diǎn)擊進(jìn)行縮放。
模塊的實(shí)際效果
九宮格縮略圖效果
放大后效果
代碼
HTML
<template>
<div class="SongList">
//用v-for循環(huán)渲染縮略圖
<div class="covers" :style="{display:MinDisplay}">
<div class="cover" v-for="(img,index) in imgs" :key='img'><img :src="img.src" width="90%" class="min" @click="ZoomIn(index)" alt=""></div>
</div>
//渲染放大后的圖
<div class="max" :style="{display:display}">
<div @click="ZoomOut" v-for="(img,index) in imgs" :key='img' :class="[index===ShowIndex?'active':'None']" ><img :src="img.src" width="100%"></div>
//放大后圖片下方的導(dǎo)航圖
<div class="small">
<div :class="[{'smallActive':index===ShowIndex},'cover-small']" v-for="(img,index) in imgs" :key='img' @click="select(index)" ><img :src="img.src" width="90%"></div>
</div>
</div>
</div>
</template>
CSS
<style scoped>
.SongList{
width: 40%;
}
.covers{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cover{
display: flex;
justify-content: center;
width: 33%;
margin: 10px 0;
}
.min{
border-radius: 10px;
cursor: zoom-in;
}
.max{
cursor: zoom-out;
width: 100%;
}
.small{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cover-small{
display: flex;
justify-content: center;
width: 10%;
margin: 10px 0;
opacity: 0.6;
cursor: pointer;
}
.cover-small:hover{
opacity: 1;
}
.active{
display: flex;
}
.None{
display: none;
}
.smallActive{
opacity: 1;
}
</style>
Javascript
<script>
export default {
name: "SongList",
data:function() {
return {
ShowIndex:0,
display: 'none',
MinDisplay:'flex',
//Vue模板中使用v-for循環(huán)渲染圖片時(shí)不能直接使用圖片文件本地位置
imgs:[
{"src":require('***.jpg')},
{"src":require('***.jpg')},
{"src":require('***.jpg')},
{"src":require('***.jpg')},
{"src":require('***.jpg')},
{"src":require('***.jpg')},
{"src":require('***.jpg')},
{"src":require('***.jpg')},
{"src":require('***.jpg')},
]
};
},
methods:{
ZoomIn(i){
this.display='block';
this.MinDisplay='none';
this.ShowIndex=i;
},
ZoomOut(){
this.display='none';
this.MinDisplay='flex';
},
select(i){
this.ShowIndex=i;
}
}
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了一個(gè)手寫的vue放大鏡，組件使用less，文中給出了示例代碼,需要的朋友可以參考下2019-08-08
這篇文章主要為大家介紹了Vue之事件處理和事件修飾符，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助<BR>2021-11-11
淺談Vue使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12
vue項(xiàng)目中l(wèi)ess的一些使用小技巧
前段時(shí)間一直在學(xué)習(xí)vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
Django+Vue.js搭建前后端分離項(xiàng)目的示例
本篇文章主要介紹了Django+Vue.js搭建前后端分離項(xiàng)目的示例，具有一定參考價(jià)值，有興趣的可以了解一下2017-08-08
Vue使用pdf-lib實(shí)現(xiàn)為文件流添加水印并預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue如何使用pdf-lib實(shí)現(xiàn)為文件流添加水印并預(yù)覽的功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起了解一下2023-03-03
手勢(shì)鎖是常見的一種手機(jī)解鎖方式，本文主要介紹了vue封裝一個(gè)圖案手勢(shì)鎖組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家詳細(xì)介紹了Vue動(dòng)態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
本篇文章主要介紹了Vue的Class與Style綁定的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要介紹了在Vue中實(shí)現(xiàn)添加全局store方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03