文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue vant使用ImagePreview实现预览图片

2022-11-13 18:36

关注

vant 使用 ImagePreview 预览图片

场景1

编列数组生成图片,点击预览图片

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

场景2

一个用字符串,用,分割为数组,编列数组生成图片,点击预览图片

   <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="预览图片"
                @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>

效果图

图片预览正确的打开方式 vue-vant中ImagePreview

在使用vue的过程中,vant在移动端的地位还是很高的,本文简单介绍一下如何在自己项目中实现ImagePreview图片预览效果,获取图片索引,点击哪一张就预览哪一张

效果图如下

实现步骤,分为3步

1、局部注册ImagePreview

import { ImagePreview } from "vant";

2、创建处理函数open,执行imagepreview函数 

关键参数:图片数组、图片索引、是否可关闭

3、点击图片调用open函数预览效果

在vant中 ImagePreview 图片预览的详细参数请看这里点击查看更多喔!

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯