https://github.com/daidaitu1314/vue2-preview
//cnpm
cnpm install vue2-preview -save //引入
import VuePreview from 'vue2-preview'
Vue.use(VuePreview)
         <img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">

            list: [{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
}, {
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}],

图片宽度自适应

                //插件里写imgload获取图片宽高
onRead(file) {
let img = new Image();
img.src = file.content;
let that = this;
img.onload = function () { // 图片的宽高要做onload后才能获取到
that.imgList.push({
src:file.content,
msrc:file.content,
title: "图片",
w: img.width,
h: img.height
})
}
},

vue 图片预览插件的更多相关文章

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

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

  2. Vue PC端图片预览插件

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

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

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

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

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

  5. eclipse 图片预览插件

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

  6. 在 vue 中使用 vieiwer 图片预览插件

    https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...

  7. Vue.js图片预览插件

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

  8. 仿百度排列图片预览插件-Simple Lightbox

    很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...

  9. 适用于移动端、PC 端 Vue.js 图片预览插件

    1.安装:npm install --save vue-picture-preview 2.使用: (1)入口文件中main.js中全局引入: import Vue from 'vue' import ...

随机推荐

  1. dml并行

    Enabling Parallel DMLA DML statement can be parallelized only if you have explicitly enabled paralle ...

  2. 全面剖析XMLHttpRequest对象

    XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础.尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用:但是,我们 ...

  3. SQLAlchemy+Flask-RESTful使用(四)

    前言 顺利出到4啦,其实学习过程中发现了不少错误,不过有些实在是没啥代表性. 最近买了两本小程序和安卓方面的书,其实从初中开始,想搞编程的目的就是写些安卓软件. 现在看来不太可能了.拿来当当兴趣爱好还 ...

  4. JAVA 数组作为方法返回值—返回地址

    package Code411;/*一个方法可以有0,1,多个 参数,但只能有0和1个返回值希望一个方法产生多个结果数据进行返回 数组作为方法的参数,传递进去的是数组的地址值. */public cl ...

  5. Javascrip动态添加样式,Dom操作,获取自定义属性

    var layer=document.querySelector('.layer') 添加样式: 添加单个样式: layer.style.display="block" 添加多个样 ...

  6. bat实现固定时间循环抓取设备log

    背景:测试时需要实时抓取android设备log,但是一份log抓取过来非常庞大(有时超过500M+,编辑器都打不开,还得找工具进行分割,甚是蛋疼),查看也非常不方便. 解决:基于上述情况,与其之后进 ...

  7. 软件工程作业-(second)

    一.选择开发工具 自己以前一直都用VS,又由于微软对Microsoft Visual Studio 更新,因此本次自己采用 Visual Studio 2019 来作为开发工具.如下图是安装后的界面: ...

  8. SQL语句完整的执行顺序(02)

    这是对SQL语句完整的执行顺序(01)的补充: 数据库是mysql,使用的数据库表名称是my_student. 表的完整数据信息是: 完整语法是: Select [select选项] 字段列表[字段别 ...

  9. spring-data-jpa 二、多对一结构、Repository

    一.Entity 例如一个user实体和一个department实体  多个用户对应一个部门 1.user类 @id:声明了一个属性映射到数据库主键字段,主键生成策略有@GenerateValue来指 ...

  10. hackerrank杂记

    https://www.hackerrank.com/challenges/py-set-discard-remove-pop/forum 知识点: *list:将list中的值取出,取出的数据大小是 ...