npm i vant -S

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);



vant的ImagePreview 图片预览组件


组件调用


如果需要在图片预览内嵌入组件或其他自定义内容，可以使用组件调用的方式，调用前需要通过 Vue.use 注册组件

<van-image-preview
  v-model="show"
  :images="images"
  @change="onChange"
>
  <template v-slot:index>第{{ index }}页</template>
</van-image-preview>
export default {
  data() {
    return {
      show: false,
      index: 0,
      images: [
        'https://img.yzcdn.cn/1.jpg',
        'https://img.yzcdn.cn/2.jpg'
      ]
    };
  },

  methods: {
    onChange(index) {
      this.index = index;
    }
  }
}

https://youzan.github.io/vant/#/zh-CN/image-preview