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>

        js 

    const popup = (link) => {
      show.value = true
      imglink.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' // 横屏时使用的单位
      }
    }
  }

7.效果

中间的图片通过flex布局来实现上下居中，其他的就不用管了，思路是这样，算是简单的实现图片预览了吧，对于移动端来说，图片位置转换没有啥意义。