smartPhoto使用，移动端预览图片，带手势拖拽smartphoto使用分享，移动端预览图片，带手势拖拽 ^^...

html中

<a v-if="checkIsImg(item.format) && item.fileUrl" :href="item.originalFileUrl" @click.stop.prevent="previewImages(item)" class="js-img-viewer"> 
    <img :src="item.fileUrl" alt="" />
</a>

js方法中

getEvidsList() {
    const _this = this
    
    ...// 省略一些获取表格内容的代码
    
    // 获取完表格内容，处理要预览的图片URL
    this.$nextTick(() => {

        setTimeout(() => {
        if (IMG_COUNT > 0) {

          if (pageNum > 1) {
          // 因为smartPhoto是叠加dom元素，所以要先销毁之前的预览内容
            _this.smartPhotoObj.destroy()
          }

          _this.smartPhotoObj = new SmartPhoto(".js-img-viewer", {
            lazyAttribute: "src"
          });
        }

      }, 0.5 * 1000);
    })
}

body标签中

<body>
    ...// 省略一些页面代码
    <link rel="stylesheet" href="./css/smartphoto.min.css">
    <!-- 本地引入smartphoto.js -->
    <script src="./js/lazyload.min@12.3.0"></script>
    <script src="./js/smartphoto.min.js?v=1"></script>
    
    <!-- cdn引入smartphoto.js -->
    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@12.3.0/dist/lazyload.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js"></script>
</body>