Vue3从0到1组件开发-业务组件：图片预览

这是我参与8月更文挑战的第29天，活动详情查看：8月更文挑战

分析一下

如上图，在前端领域内，当某一项目可以上传多图时，都是默认展示预览图，当点击预览图之后，会展示如效果所示的预览效果。

这一效果对于在需要展示多图时几乎是既然会见到的了，不同之处在于，在PC端常见为半透明遮罩层+图片来展示，而移动端受限于空间，则常见为色块背景+图片。

此外可以添加图片旋转、预览图、数字、返回、关闭等不同的按钮来使得效果更完善。

结构。

如果是使用uni-app开发的话，可以直接使用封装好的uni.previewImage函数来实现这一效果。

而如果自己实现的话也比较简单

<template>
<yx-mask :bgColor="#333" @click.stop="close">
    <yx-icon type="allow-left" class="back" @click="close">
    <span v-if="type=='number' class="thumbs">{{index}}/{{imgList.length}}</span>
    <div v-else class="thumbs thumbs-images">
      <!-- 缩略图 -->
      <img v-for="item in imgThumbsList" :key="item.id" :src="item.src" />
    </div>
    <img v-for="item in imgList" :key="item.id" :src="item.src" />
    <yx-icon type="allow-prev" @click="prev" />
    <yx-icon type="allow-next @click="next" />
<yx-mask>
</template>

比较的简单的结构可以如上图，仅包含上下翻页、返回按钮、图片等主要元素。

如果需要展示当前页码、缩略图也可以根据需要直接添加即可。这一块自由度比较高。

因为这一效果主要内容来源于后端请求，效果本身也只是布局+css部分就可以完成。

其他的事件的逻辑部分相较而言就简单很多了。

methods: {
  close(){
    this.isSHow = false;
    if(emits('change') emits('change', false)
  },
  prev(){
    if(this.index + 1 < this.imgList.length) index++
  },
  next(){
    if(this.index - 1 > 0) index--
  }
}

简单的事件处理如上，如果需要针对事件做其他的处理的话，也尽可以完善它。