vue移动端开发 vant框架使用 ImagePreview 之 图片预览 放大

1.HTML部分 

 <div class="block" @click="open(index)">
                            <div class="img"  v-if="bottomData.length>0">
                               <img 
                                style="margin-left:0.5rem;"
                                :key="index"
                                v-for="(a,index) in item.imgUrl"
                                width="80rem;"
                                height="80rem;"
                                :src="a"
                                alt=""
                            />
                            </div>
                        </div>
                    </div>

 js部分

data是下标，显示对应的图片，

startPosition 图片预览起始位置索引  给0 显示图片的页数

 

  //图片放大
       open(data){
         console.log(data,"555")
          let that=this
        console.log(that.bottomData[data].imgUrl,"--------")
        
        // this.bottomData.
          ImagePreview({
            // images:this.newImgUrl,
            images:that.bottomData[data].imgUrl,
            startPosition:0,
           
        })
     },

 注意一定调成手机模式，不然滑动不了.切换不了图片

返回数据格式 ，是数组，如果不是，自己处理成数组

如果用的额地方比较多，就main.js中引入，如果少，就当前页面引入

import { ImagePreview } from 'vant';