vant 图片放大预览（vue3）

最近在写移动端的时候要实现图片放大预览的功能，当时用的是vant，原本想的是直接用vant里面的组件来实现放大预览，后面仔细找了一下发现没有找到这个功能（可能是我没找到），后面想到了用遮罩层来实现放大预览。

1，了解van-overlay

这是vant的遮罩层组件，最高层级，可以显示在最顶部，实现对页面进行遮挡。

<van-overlay :show="show" @click="show = false"><div class="wrapper" @click.stop><div class="block" /></div>
</van-overlay>

这是官方的写法，通过插槽在遮罩里面添加自己定义的内容，我们需要的就是把官方定义的内容替换成我们自己的内容。

2，遮罩打开或关闭

通过组件的:show属性来控制打开或者关闭，我们在vue3组件中定义好show，来控制遮罩的展示或者隐藏。

  const show= ref<Boolean>(false)

3.点击图片时修改show，控制打开

给图片添加点击事件，事件绑定的函数里将show设置为true，以实现点击图片打开遮罩

html代码

          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false"><van-swipe-item v-for="(item_img, index) in item" :key="index" @click="popup(item_img)"><img :src="item_img" class="achievement_carousel_img" /></van-swipe-item></van-swipe>

    const popup = (link) => {show.value = trueimglink.value = link  //点击图片时获取图片地址，然后将地址将遮罩里的图片替换。}

4.在遮罩里面通过插槽定义好图片

在插槽里写入img标签，标签的src赋值图片变量，在我们点击图片时，将图片获取到，并替换成之前的图片变量。

遮罩层代码

      <van-overlay :show="show" @click="show = false" style="z-index: 9999;" class="popbox" lock-scroll><img :src="imglink" alt="" class="popimg"></van-overlay>

这时候就能实现点击图片时放大图片了，同时，遮罩层可以直接用css代码定义样式。

5，兼容性问题

放大图片是完成了，这时候要考虑的就是兼容性问题了，我用的是postcss-px-to-viewport作为适配方案，将px等比例转为vw，这时候要考虑的就是，假设，我图片原本的尺寸是755x1000，这时候因为设计稿是320的宽，所以原本的图片要压缩到755的宽，然后在等比例的将高也压缩到合适的比例，这个的问题也解决了。后续看你们使用的是什么兼容方案，稍微转换下就成。

export default  {plugins: {'postcss-px-to-viewport': {unitToConvert: 'px',  // 需要转换的单位，默认为"px"viewportWidth: 320, //  设计稿的视口宽度unitPrecision: 5, // 单位转换后保留的精度propList: ['*'], // 能转化为vw的属性列表viewportUnit: 'vw', //  希望使用的视口单位fontViewportUnit: 'vw', // 字体使用的视口单位selectorBlackList: [], // 需要忽略的CSS选择器 '.el','el'minPixelValue: 0.01, // 最小的转换数值，如果为1的话，只有大于1的值会被转换mediaQuery: false, // 媒体查询里的单位是否需要转换单位replace: true, // 是否直接更换属性值，而不添加备用属性exclude: [/node_modules/,/\/pages\/mobile\//], // 忽略某些文件夹下的文件或特定文件include: undefined,  // 如果设置了include，那将只有匹配到的文件才会被转换，例如只转换 'src/mobile' 下的文件 (include: /\/src\/mobile\//)landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)landscapeUnit: 'vw' // 横屏时使用的单位}}}