vue.js - vue 仿微信日志中查看图片及滑动的写法？

Question

求个移动端的vue 仿微信日志中查看图片及滑动的写法，图片可缩放、滑动、横图顶左右两边，竖图顶上下边

最好能用到el-carousel组件

Answer 1

在Vue中仿制微信日志中查看图片并支持滑动、缩放的功能，虽然el-carousel（Element UI的轮播组件）主要用于简单的图片轮播，并不直接支持图片的缩放和复杂的手势操作（如横向滑动查看大图时的边缘对齐），但你可以结合其他库来实现这一功能。

以下是一个基于Vue的实现思路，使用vue-photo-preview（一个轻量级的图片预览库，支持缩放和手势滑动）和CSS样式调整来模拟微信日志中的图片查看功能：

1. 安装必要的库

首先，安装vue-photo-preview：

npm install vue-photo-preview --save

2. 在Vue项目中引入并使用vue-photo-preview

在你的Vue组件中引入并使用vue-photo-preview：

// main.js 或你的组件文件
import Vue from 'vue'
import PhotoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'

Vue.use(PhotoPreview, {
  maxZoomNum: 3, // 最大缩放倍数
  zIndex: 2000, // 控制预览框的z-index
  closeElClass: 'el-icon-close', // 关闭按钮的类名，这里使用了Element UI的图标
  fullscreenElClass: 'el-icon-arrow-up-down' // 全屏按钮的类名
})

3. 模板部分

在你的Vue组件模板中，使用el-carousel作为图片展示的基础，并为每个图片项添加preview属性，用于vue-photo-preview的识别：

<template>
  <el-carousel trigger="click" height="200px">
    <el-carousel-item v-for="(img, index) in images" :key="index">
      <img :src="img" alt="preview" preview="your-gallery-name" preview-text="description">
    </el-carousel-item>
  </el-carousel>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'https://example.com/image1.jpg',
        'https://example.com/image2.jpg',
        // 更多图片
      ]
    }
  }
}
</script>

4. 样式调整

你可能需要一些CSS来调整图片在轮播中的显示方式，以及预览时的样式。对于横图顶左右两边、竖图顶上下边的需求，这更多依赖于vue-photo-preview的预览样式，你可能需要查看其文档或自定义预览样式来满足具体需求。

5. 注意事项

• vue-photo-preview支持手势操作，包括缩放和滑动，但el-carousel主要用于简单的轮播，不支持手势滑动切换。因此，在预览模式下，用户实际上会离开el-carousel的上下文。
• 如果需要更精细的控制（如横图顶左右两边），可能需要进一步自定义vue-photo-preview的预览样式，或者使用其他更强大的图片查看组件。

通过上述步骤，你可以实现一个在Vue中仿制微信日志中查看图片并支持滑动、缩放的功能。