vant 预览 图片

vant 预览 图片

1.核心代码

<!--  -->
<template>
  <div class=''>
    <van-nav-bar title="预览png"
                 left-text="返回"
                 left-arrow
                 class="title"
                 @click-left="onClickLeft"
                 fixed
                 :placeholder="isFixedHeight"
    />
    <div v-for="(item,index) in imageLists" :key="index">
      <van-image
          width="100"
          height="100"
          :src="item"
          @click="sceneImg(imageLists,index)"
      />
    </div>

  </div>
</template>

<script>

import {ImagePreview} from "vant"; // 引入Vant图片预览组件
export default {
  name: 'Png',
  data() {

    return {
      isFixedHeight: true,
      imageLists: ['https://xx.png',
        'https://xx.jpeg'
      ]
    };
  },


  methods: {
    //返回键
    onClickLeft() {
      this.$router.go(-1)
    },
    // 图片预览
    sceneImg(images, index) {
      ImagePreview({
        images: images, //需要预览的图片 URL 数组
        showIndex: true, //是否显示页码
        loop: false, //是否开启循环播放
        startPosition: index //图片预览起始位置索引
      })
    },
  },

  created() {

  }

}
</script>
<style scoped>

</style>