快捷導(dǎo)航

Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片

更新時間：2022年10月20日 10:05:07 作者：今天代碼敲了嗎

這篇文章主要介紹了Vue?vant使用ImagePreview實(shí)現(xiàn)預(yù)覽圖片，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant 使用 ImagePreview 預(yù)覽圖片

場景1

編列數(shù)組生成圖片，點(diǎn)擊預(yù)覽圖片

    <div class="zoom"
         v-for="(item, index) in listData"
         v-show="item"
         :key="index"
         >
              <img
                v-if="item"
                class="img"
                :src="item"
                alt="預(yù)覽圖片"
                @click="getImg(listData, index)"
              />
            </div>
<script>
import { ImagePreview } from "vant";
export default {
  name: "ImagePreview ",
  data() {
    return {
      listData: ["1.jpg","2.jpg"],//圖片數(shù)組
    };
  },
  methods: {
    getImg(images, index) {
      ImagePreview({
        images: this.listData,
        showIndex: true,
        loop: false,
        startPosition: index
      });
    }
  },
  computed: { },
  created() {}
};
</script>

場景2

一個用字符串，用，分割為數(shù)組，編列數(shù)組生成圖片，點(diǎn)擊預(yù)覽圖片

   <div class="zoom"
         v-for="(item, index) in imgstr && imgstr.split(',')"
         v-show="item"
         :key="index"
         >
              <img
                v-if="item"
                class="img"
                :src="item"
                alt="預(yù)覽圖片"
                @click="getImg(imgstr , index)"
              />
            </div>
<script>
import { ImagePreview } from "vant";
export default {
  name: "ImagePreview ",
  data() {
    return {
    imgstr :"1.jpg,2.jpg"
    imglist: []
    };
  },
  methods: {
   this.imglist = [];
      const imgurls = imgstr.split(",");
      for (let index = 0; index < imgurls.length; index++) {
        this.imglist.push(this.viewImgs(imgurls[index]));
      }
      ImagePreview({
        images: this.imglist,
        showIndex: true,
        loop: false,
        startPosition: index
      });
  },
  computed: { },
  created() {}
};
</script>