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. Corn Fields POJ - 3254 (状压dp)

    题目链接: Corn Fields  POJ - 3254 题目大意:给你一个n*m的矩阵,矩阵的元素只包括0和1,0代表当前的位置不能放置人,1代表当前的位置可以放人,当你决定放人的时候,这个人的四 ...

  2. python selenium 模块

    控制已打开的浏览器 https://www.cnblogs.com/lovealways/p/9813059.html selenium.自动填充文本框.自动点按钮 https://blog.csdn ...

  3. python知识点

    if __name__ == 'main' 一个python的文件有两种使用的方法,第一是直接作为脚本执行,第二是import到其他的python脚本中被调用(模块重用)执行. 因此if __name ...

  4. git本机服务器配置(三):Gitblit的安装

    1. 下载 http://www.gitblit.com/ 2. 解压下载文件 3. 配置信息 3.1 需要提前配置好java jdk环境 3.2 打开data目录下的defaults.propert ...

  5. 秋名山老司机(BS4与正则的比拼)

    因为嘉伟思杯里的一个脚本题目,16进制计算,python3正则还没学,所以没写出来.大佬跟我说也可以用BS4,从DOM上下手,直接爬下来直接一个eval就搞定了,eval可以像这样计算16进制,eva ...

  6. MySQL1:客户端/服务器架构

    一.MySQL的客户端/服务器架构 前言 之前对MySQL的认知只限于会写些SQL,本篇算是笔记,记录和整理下自己对MySQL不熟悉的地方. 大致逻辑: MySQL的服务器程序直接和我们存储的数据打交 ...

  7. Appnium-API-Execute Mobile Command

    Execute Mobile Command Java:driver.executeScript("mobile: scroll", ImmutableMap.of("d ...

  8. Qt无法正确 sendMessage 的消息

    项目背景: 项目需要将vc中的代码移植到Qt中,而且由于使用的SDK是32位,所以,Qt使用的版本是MinGW32,另外下载的也是官网最新的版本Qt5.11.1. 系统环境:Windows10 在将w ...

  9. Filebeat 启动关闭流程

    启动阶段: instance/beat.go #打印home路径.配置路径.数据路径和日志路径 seccomp #Syscall filter检查 instance/beat.go #beat inf ...

  10. Python爬虫基础之Cookie

    一.Cookie会话 简单地说,cookie就是存储在用户浏览器中的一小段文本文件.Cookies是纯文本形式,它们不包含任何可执行代码.一个Web页面或服务器告之浏览器来将这些信息存储并且基于一系列 ...