You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
113 lines
2.0 KiB
113 lines
2.0 KiB
2 years ago
|
<!--
|
||
|
* @Author: ch
|
||
|
* @Date: 2022-06-24 19:07:45
|
||
|
* @LastEditors: ch
|
||
|
* @LastEditTime: 2022-06-27 10:37:12
|
||
|
* @Description: file content
|
||
|
-->
|
||
|
<template>
|
||
|
<div class="preview-imgs">
|
||
|
{{imgs}}
|
||
|
<ul>
|
||
|
<li v-for="(i, idx) in list" :key="idx" :class="{'active' : curIndex == idx}" >
|
||
|
<img :src="i" @click="curIndex = idx"/>
|
||
|
</li>
|
||
|
</ul>
|
||
|
<p v-if="curIndex > -1">
|
||
|
<img :src="list[curIndex]" @click="curIndex = -1"/>
|
||
|
<span class="prev" @click="prev" v-if="curIndex > 0"></span>
|
||
|
<span class="next" @click="next" v-if="curIndex < list.length-1"></span>
|
||
|
</p>
|
||
|
</div>
|
||
|
</template>
|
||
|
<script>
|
||
|
export default {
|
||
|
props : {
|
||
|
list : {
|
||
|
type : Array,
|
||
|
default : () => ([])
|
||
|
}
|
||
|
},
|
||
|
data(){
|
||
|
return {
|
||
|
curIndex : -1,
|
||
|
// imgs : ['https://msb-edu-dev.oss-cn-beijing.aliyuncs.com/mall-product/product/cscs.png','https://img.alicdn.com/imgextra/i3/859515618/O1CN01Y1K5fp1rN5qfdxCtL_!!859515618.jpg']
|
||
|
}
|
||
|
},
|
||
|
methods:{
|
||
|
next(){
|
||
|
this.curIndex++;
|
||
|
},
|
||
|
prev(){
|
||
|
this.curIndex--;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
<style lang="scss" scoped>
|
||
|
.preview-imgs{
|
||
|
ul{
|
||
|
display: flex;
|
||
|
}
|
||
|
li{
|
||
|
width: 46px;
|
||
|
height : 46px;
|
||
|
border: 1px solid #eee;
|
||
|
margin-right: 10px;
|
||
|
padding: 1px;
|
||
|
cursor: pointer;
|
||
|
img{
|
||
|
width: 42px;
|
||
|
height: 42px;
|
||
|
object-fit: contain;
|
||
|
}
|
||
|
&.active{
|
||
|
border-color: #FF512B;
|
||
|
position: relative;
|
||
|
&::after{
|
||
|
content: '';
|
||
|
height: 3px;
|
||
|
width: 3px;
|
||
|
bottom: -7px;
|
||
|
left: 17px;
|
||
|
display: block;
|
||
|
position: absolute;
|
||
|
// transform: rotate(45deg);
|
||
|
border: 3px solid #FF512B;
|
||
|
border-left-color: transparent;
|
||
|
border-right-color: transparent;
|
||
|
border-bottom-color: transparent;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
p{
|
||
|
width: 300px;
|
||
|
margin-top: 20px;
|
||
|
position: relative;
|
||
|
img{
|
||
|
width: 300px;
|
||
|
height: 300px;
|
||
|
object-fit: contain;
|
||
|
cursor: zoom-out;
|
||
|
}
|
||
|
&:hover span{
|
||
|
display: block;
|
||
|
}
|
||
|
span{
|
||
|
display: none;
|
||
|
position: absolute;
|
||
|
width: 40px;
|
||
|
height: 40px;
|
||
|
background: rgba(0,0,0, .5);
|
||
|
top : 130px;
|
||
|
cursor: pointer;
|
||
|
&.prev{
|
||
|
left: 0;
|
||
|
}
|
||
|
&.next{
|
||
|
right: 0;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
</style>
|