vue3+ele-plus的页面，采用el-image组件实现图片展示及点击大图预览功能，PAD端使用时无法局部拖拽？求解？

Z时代
2024-02-05
分类：IT

如题，使用vue3+ele-plus的页面，采用el-image组件实现图片展示及点击大图预览功能，该页面要兼容PAD移动端访问使用，其中el-image组件配置的点击大图预览功能在PAD端使用时无法点击图片局部进行拖拽，求教兼容解决方法。

使用el-image组件显示图片，并可点击大图预览，代码及截图如下：

              <!-- 病历图片展示 -->
              <el-image class="previewImg" :src="previewImageUrl" :zoom-rate="1.2" :preview-src-list="previewSrcList"
                :initial-index="1" fit="contain">
                <template #error>
                  <div class="image-slot">
                    <el-icon>
                      <Picture />
                    </el-icon>
                  </div>
                </template>              </el-image>

vue3+ele-plus的页面，采用el-image组件实现图片展示及点击大图预览功能，PAD端使用时无法局部拖拽？求解？
PC端访问，点击大图预览功能使用正常，如下图：

求教兼容实现PAD端访问网页可正常点击图片实现大图预览，并可拖拽局部方法缩小、旋转等功能的解决办法。或者有无其他兼容PC端、PAD端访问图片展示及点击大图预览的好的插件推荐。

回答：

在移动端浏览器中，由于手指触摸和点击行为的处理方式与 PC 端浏览器不同，可能会导致一些组件在移动端表现不一致。

对于 el-image 组件的图片预览功能，存在 PAD 端无法点击图片局部进行拖拽的问题。这可能是由于 PAD 端触摸事件的处理方式与 PC 端不同导致的。虽然 Vue.js 框架对不同浏览器和终端设备的兼容性非常高，但是对于一些特殊情况，我们还需要在代码中进行适配。

为了解决这个问题，你可以采用以下几种方式：

使用移动端专用组件库来实现图片预览功能，例如 PhotoSwipe、Viewer.js 等。这些组件库专门针对移动端浏览器进行了优化，支持比较完整和自然的手势操作和效果。你可以在组件库的官方文档中找到详细的使用说明和示例代码。
手动编写图片预览功能，使用原生 JavaScript 和 CSS3 实现手势事件的监听和处理，这样就能够更加灵活地适配各种场景。你可以参考一些开源的手势库，例如 Hammer.js、AlloyFinger 等，以及一些示例代码，自行编写图片预览功能。
对于 el-image 组件，你可以在其上层添加一个透明的容器元素，并监听该元素的 touch 事件，通过计算手指触摸点的位置和位移量，来实现手势操作和局部拖拽效果。具体做法可以参考以下代码示例：

<template>
  <div class="image-container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
    <el-image :src="previewImageUrl" :preview-src-list="previewSrcList" fit="contain">
      <template #error>
        <div class="image-slot">
          <el-icon>
            <Picture />
          </el-icon>
        </div>
      </template>
    </el-image>
  </div>
</template>
<script>
export default {
  data() {
    return {
      previewImageUrl: 'https://example.com/image.jpg',
      previewSrcList: ['https://example.com/image.jpg', 'https://example.com/image2.jpg'],
      startX: null,
      startY: null,
      offsetX: 0,
      offsetY: 0,
    };
  },
  methods: {
    onTouchStart(event) {
      this.startX = event.touches[0].pageX;
      this.startY = event.touches[0].pageY;
      this.offsetX = 0;
      this.offsetY = 0;
    },
    onTouchMove(event) {
      if (this.startX !== null && this.startY !== null) {
        this.offsetX = event.touches[0].pageX - this.startX;
        this.offsetY = event.touches[0].pageY - this.startY;
      }
    },
    onTouchEnd(event) {
      // 根据 offsetX 和 offsetY 的值，来判断是否进行拖拽操作
      // 根据点击事件和位移量，来判断是否进行缩放操作
    },
  },
};
</script>
<style scoped>
/* 添加一个全屏的透明容器，用于监听 touch 事件 */
.image-container {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: transparent;
}</style>