vant实现图片的预览事例

vant在移动端还是挺香的

首先先说一下按需导入vant吧

  cnpm i vant --save
  cnpm i babel-plugin-import --save-dev

在项目根目录,也就是src平级目录建立一个.babelrc文件

{
  "plugins": [
    ["import", {
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]
}

如何预览图片呢？

        


 data() {
    return {
      show: false,
      index: 0,
       images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
     ],
    };
  },
  
 components: {
 [ImagePreview.Component.name]: ImagePreview.Component,
},

methods: {
onChange(index) {
  this.index = index;
},
showPreview(index){
  this.show = true
  ImagePreview({images: this.images, startPosition: index});
}
},

完事