1、安装:npm install --save vue-picture-preview

2、使用:

(1)入口文件中main.js中全局引入:

import Vue from 'vue'
import vuePicturePreview from 'vue-picture-preview';
Vue.component('Previewer', vuePicturePreview);
(2)按需局部引入:
import vuePicturePreview from 'vue-picture-preview';
export default {
  components: {
    Previewer: vuePicturePreview
  }
}
(3)示例
// 在dom中使用如下代码:
<div>
    <img
        class="previewer-demo-img"
        v-for="(item, index) in list"
        :src="item.src"
        width="100"
        @click="show(index)"
        :key="index"
      />
      <previewer ref="previewer" :list="list" :options="options"> </previewer>
</div>
// 数据和逻辑处理代码如下:
export default {
  data() {
    return {
      list: [
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          w: 600,
          h: 400
        }
      ],
      options: {
        getThumbBoundsFn(index) {
          // 找到缩略图的元素
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[
            index
          ];
          // 得到y轴滚动的距离
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // 可以选择水平滚动
          // 获取元素相对于视口的位置
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  },
 methods: {
    show(index) {
      // 显示特定index的图片,使用ref
      this.$refs.previewer.show(index);
    }
  }
};
 
(4)项目中实战:

图片数组处理:

 

适用于移动端、PC 端 Vue.js 图片预览插件的更多相关文章

  1. Vue.js图片预览插件

    vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...

  2. js图片预览插件,不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  3. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  4. 实现一个vue的图片预览插件

    vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...

  5. Viewer.js 图片预览插件使用

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

  6. Vue PC端图片预览插件

    *手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...

  7. 【VUE】图片预览放大缩小插件

    From: https://www.jianshu.com/p/e3350aa1b0d0 在看项目时,突然看到预览图片的弹窗,感觉好僵硬,不能放大,不能切换,于是便在网上找下关于图片预览的插件,有找到 ...

  8. eclipse 图片预览插件

      eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...

  9. vue-preview vue图片预览插件+缩略图样式

    一.安装 npm i vue-preview -S 二.main.js中  导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...

随机推荐

  1. Redis 5 种基本数据结构(String、List、Hash、Set、Sorted Set)详解 | JavaGuide

    首发于:Redis 5 种基本数据结构详解 - JavaGuide 相关文章:Redis常见面试题总结(上) . Redis 5 种基本数据结构(String.List.Hash.Set.Sorted ...

  2. 2020年是时候更新你的技术武器库了:Asgi vs Wsgi(FastAPI vs Flask)

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_167 也许这一篇的标题有那么一点不厚道,因为Asgi(Asynchronous Server Gateway Interface) ...

  3. (一)、数字图像处理(DIP)

    1.什么是图像? 图像是人类视觉的基础,是自然景物的客观事实,是人类认识世界和人类本身的重要源泉:也可以说图像是客观对象的一种表示. '图'是物体反射或透射光的分布:'像'是人的视觉系统所接受的图,在 ...

  4. Spherical类定义和实现

    此类是一个全景摄像机视角,书上介绍了详细原理.直接给实现代码. 类声明: #pragma once #ifndef __SPHERICAL_HEADER__ #define __SPHERICAL_H ...

  5. DP 优化方法合集

    0. 前言 写完这篇文章后发现自己对于 DP 的优化一窍不通,所以补了补 DP 的一些优化,写篇 blog 总结一下. 1. 单调队列/单调栈优化 1.2 算法介绍 这应该算是最基础的 DP 优化方法 ...

  6. 【喜讯】Apache DolphinScheduler 荣获 “2020 年度十大开源新锐项目”

    经 10000+ 开发者公开票选,20+专家评审. 10+ 主编团打分,历经数月打磨,11 月 19 日,由InfoQ 发起并组织的[2020中国技术力量年度榜单评选]结果正式揭晓. 2020 年度十 ...

  7. Go 语言图片处理简明教程

    虽然 Go 语言主要用于 Web 后端以及各类中间件和基础设施开发,也难免遇到一些图像处理的需求.Go 语言提供的 image 标准库提供了基本的图片加载.裁剪.绘制等能力,可以帮助我们实现一些绘图需 ...

  8. Dynamic CRM一对多关系的数据删除时设置自动删除关联的数据

    在业务实体中主子表非常常见,然后子表可能有会有自己的子表或者多对多关系,在删除的业务场景下,删除主数据,剩余的子数据就成了脏数据, 之前的做法是,监听主表的删除事件,然后在插件中找到其下的子表数据然后 ...

  9. 从0搭建Vue3组件库:button组件

    button组件几乎是每个组件库都有的:其实实现一个button组件是很简单的.本篇文章将带你一步一步的实现一个button组件.如果你想了解完整的组件库搭建,你可以先看使用Vite和TypeScri ...

  10. 解决:Uncaught TypeError: $ is not a function

    本来好好的,突然就出现的错误,不过这并不是什么难解决的错误: 我的问题是:在js文件里我定义了一个var $;变量,只要把这个去掉就没问题了. 出现这种错误的解决方法: 1,先看看你的jq文件是否已经 ...