在项目开发中，公司前人使用vue3+elementPlus开发H5页面。
领导突然说你这个图片放大后咋不能双指缩放啊，其他的页面都能放大缩小。
我说，我看看代码怎么回事。
看完代码发现，H5页面内容是富文本字符串，使用div标签的v-html指令解析的。
然后再使用el-image标签实现的图片预览效果，当时我惊人天人，这在移动端，el-image能实现双指手势操作？
我就开始面向百度编程，找了一圈，有说el-image标签是可以在移动端适配的，可以双指操作，但是亲测实在是不行
我就开始在网上找各种插件，网上的插件天花乱坠，有ViewerJS、vue3-photo-preview、最后找到了
vue-photo-preview-next
其实vue3-photo-preview和vue-photo-preview-next插件应该一样，只是版本不同，这里附上链接
安装
npm install vue-photo-preview-next --save
全局注册main.js
import photoPreview from 'vue-photo-preview-next'
import 'vue3-photo-preview/dist/index.css'
app.use(photoPreview)
页面使用
<template>
<photo-provider>
<photo-consumer v-for="src in imgList" :intro="src" :key="src" :src="src">
<img :src="src" class="view-box" />
</photo-consumer>
</photo-provider>
</template>
其实到这里在页面上已经可以预览图片了
但是！！！
我上面说了我内容是富文本渲染出来的，没办法在页面上插入photo-provider和photo-consumer组件
我一开始试了很多办法，比如在获取富文本内容的时候，把img标签全部替换成photo-provider和
photo-consumer，再v-html渲染出来，但是v-html不识别这两个标签，导致无法放大预览。
然后我在找其他插件的时候，发现vue-photo-preview-next还有个组件，PhotoSlider组件
作者在示例中也没有写怎么用，我就查这个组件怎么用的，发现这个组件可以直接预览图片，并进行双
指操作缩放。
<photo-slider
v-model:visible="imgDialog"
:items="elimageList"
:index="elimageIndex"
@changeIndex="handleSliderIndexChange"
@clickMask="imgDialog=false"
@clickPhoto="imgDialog=false"
@closeModal="imgDialog=false"
/>
只要通过v-model:visible="imgDialog"就可以控制这个组件的显隐，当点击页面图片的时候
设置为true;
| 名称 | 类型 | 描述 | 默认值 | 必填 | |
|---|---|---|---|---|---|
| items | ItemType[] | 图片列表 | - | 是 | |
| index | number | 图片当前索引 | - | 是 | |
| visible | number | 是否显示模态框 | - | 是 | |
| should-transition | boolean | 箭头切换是否需要过渡 | false | 否 | |
| toggle-overlay | boolean | 是否切换显隐覆盖物 | true | 否 | |
| default-backdrop-opacity | number | 默认背景透明度 | 1 | 否 | |
| loop | boolean | 是否循环显示预览图 | false | 否 | |
| download-method | (item: ItemType) => void | null | 下载图片方法，不传使用内置的下载方法 | null | 否 |
@changeIndex="handleSliderIndexChange"
通过changeIndex事件获取图片的索引来设置图片的切换。
这样就很完美的解决了在移动端H5页面内容为富文本的时候，实现图片双指操作缩放。
此致！！！开发插件的作者，感谢撒花🎉🎉🎉🎉🎉🎉
