66 lines
1.6 KiB
Vue
66 lines
1.6 KiB
Vue
<template>
|
|
<div class="ImgDetail-main" ref="ImgDetail-main" @click="closeImgDetail($event)" style="display: none">
|
|
<div class="ImgDetail-container" >
|
|
<div class="ImgDetail-box">
|
|
<div class="close-btn" @click="closeImgDetail($event)">X</div>
|
|
<div class="left-box">
|
|
<img src="/img/leftImgDetailIcon.png" title="图片" alt="暂无图片"
|
|
@click="leftEvent">
|
|
</div>
|
|
<div class="right-box">
|
|
<img src="/img/rightImgDetailIcon.png" title="图片" alt="暂无图片"
|
|
@click="rightEvent">
|
|
|
|
</div>
|
|
<div class="img-box">
|
|
<template v-for="(item,idx) in props.imgList">
|
|
<img v-show="idx === imgIdx" :src="item" alt="">
|
|
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
|
|
const props = defineProps({
|
|
imgList:Array,
|
|
imgIdx:Number
|
|
})
|
|
const emits = defineEmits()
|
|
|
|
const imgIdx = ref(props.imgIdx)
|
|
|
|
const closeImgDetail = function (e){
|
|
document.getElementsByClassName('ImgDetail-main')[0].style.display='none'
|
|
|
|
}
|
|
const leftEvent = function (){
|
|
if(!imgIdx.value <= 0){
|
|
imgIdx.value -=1
|
|
emits('left')
|
|
}
|
|
}
|
|
const rightEvent = function (){
|
|
if(imgIdx.value < props.imgList.length-1){
|
|
imgIdx.value += 1
|
|
emits('right')
|
|
}
|
|
}
|
|
|
|
watch(props,nv=>{
|
|
imgIdx.value = nv.imgIdx
|
|
})
|
|
defineExpose({
|
|
showImgDetail(){
|
|
document.getElementsByClassName('ImgDetail-main')[0].style.display='block'
|
|
}
|
|
})
|
|
|
|
</script>
|
|
|
|
<style scoped src="~/assets/css/ImgDetail/index.scss"></style>
|
|
<style scoped src="~/assets/css/ImgDetail/media.scss"></style> |