vue简单的图片相册幻灯片

vue简单的图片相册幻灯片

基于Vue.js构建的响应式的图片幻灯片，图片相册，大图切换展示代码。动态设置图片url路径，来实现简单的图片切换效果

出现下面这个情况的原因是：

父组件通过 props 向下传递数据给子组件，使用 props 传递数据，子组件需要定义props属性，子组件接收props值

子组件，如果在定义的时候，写错了，如下所示：

prop:['photos'],

父组件 值 传递到这里，堵在这里，子组件接收不到的。。所以props这个切记不能写错！！！

子组件，接收到 父组件 传递过来的数据，我们就可以在子组件里 任意 去使用，想在哪里使用 都可以！！

html：

<div id="app" class="container">
<vue-gallery :photos="photos"></vue-gallery>
</div>

css：

<!--图标库-->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css'>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #5c4084;
padding: 25px;
}
.container{
padding: 6px;
border-radius: 8px;
max-width: 800px;
background-color: #fff;
box-shadow: 0 5px 8px #00007a;
margin-right: auto;
margin-left: auto;
}
.vueGallery .activePhoto{
width: 100%;
margin-bottom: 5px;
padding-bottom: 65%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border: 2px solid #fff;
position: relative;
}
.vueGallery .activePhoto button{
border: none;
background-color: transparent;
font-size: 32px;
color: #fff;
opacity: 0.5;
position: absolute;
outline: none;
height: 100%;
}
.vueGallery .activePhoto button:hover{
opacity: 1;
}
.vueGallery .activePhoto button.previous{
padding: 0 1em 0 0.7em;
left: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.vueGallery .activePhoto button.next{
padding: 0 0.7em 0 1em;
right: 0;
background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.vueGallery .thumbnails{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-gap: 5px;
}
.vueGallery .thumbnails div{
width: 100%;
border: 2px solid #fff;
outline: 2px solid #fff;
cursor: pointer;
padding-bottom: 65%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 1;
}
.vueGallery .thumbnails div:hover{
opacity: 0.6;
}
.vueGallery .thumbnails div.active{
outline-color: #5c4084;
opacity: 1;
}
</style>

vuejs：

<script type="text/x-template" id="vue-gallery">
<div class="vueGallery">
<div class="activePhoto" :style="'background-image:url('+photos[activePhoto]+')'" >
<button class="previous"  @click="previousPhoto()">
<i class="fas fa-chevron-circle-left"></i>
</button>
<button class="next"  @click="nextPhoto()">
<i class="fas fa-chevron-circle-right"></i>
</button>
</div>
<div class="thumbnails">
<div v-for="(photo,index) in photos"
:src="photo"
:key="index"
@click="changePhoto(index)"
:style="'background-image:url('+photo+')'"
:class="{'active':activePhoto==index}"
>
</div>
</div>
</div>
</script>

<script src="js/vue.js"></script>
<script>
Vue.component('vue-gallery',{
props:['photos'],
data:function(){
return {
activePhoto:null
}
},
template:`#vue-gallery`,
mounted(){
this.changePhoto(0);
document.addEventListener('keydown',(event)=>{
if(event.which == 37){
this.previousPhoto()
}
if(event.which == 39){
this.nextPhoto()
}
})
},
methods:{
changePhoto(index){
console.log(index)
this.activePhoto = index;
},
nextPhoto(){
this.changePhoto(this.activePhoto+1<this.photos.length ? this.activePhoto+1 : 0)
},
previousPhoto(){
this.changePhoto(this.activePhoto-1>=0 ? this.activePhoto-1 : this.photos.length-1)
}
}
});
var vm = new Vue({
el:'#app',
data:{
photos:[
'img/lordea-home-01-min.jpg',
'img/lordea-home-02-min.jpg',
'img/lordea-home-03-min.jpg',
'img/lordea-home-04-min.jpg',
'img/lordea-home-05-min.jpg',
'img/lordea-home-06-min.jpg',
'img/lordea-home-07-min.jpg',
'img/lordea-home-08-min.jpg',
]
},
methods:{

}
})

</script>