vue 图片预览插件
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 图片预览插件的更多相关文章
- vue-preview  vue图片预览插件+缩略图样式
		
一.安装 npm i vue-preview -S 二.main.js中 导入组件 //vue-preview 开始 import VuePreview from 'vue-preview'; // ...
 - Vue PC端图片预览插件
		
*手上的项目刚刚搞完了,记录一下项目中遇到的问题,留做笔记: 需求: 在项目中,需要展示用户上传的一些图片,我从后台接口拿到图片url后放在页面上展示,因为被图片我设置了宽度限制(150px),所以图 ...
 - 实现一个vue的图片预览插件
		
vue-image-swipe 基于photoswipe实现的vue图片预览组件 安装 1 第一步 npm install vue-image-swipe -D 2 第二步 vue 入口文件引入 im ...
 - js图片预览插件,不涉及上传
		
小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...
 - eclipse 图片预览插件
		
eclipse 图片预览插件 CreateTime--2018年4月22日22:59:55 Author:Marydon 下载地址:eclipse 图片预览插件 将插件文件夹直接拷贝到eclips ...
 - 在 vue 中使用 vieiwer 图片预览插件
		
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
 - Vue.js图片预览插件
		
vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...
 - 仿百度排列图片预览插件-Simple Lightbox
		
很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到这样的需求之后,第一反应想到的是在源码网 ...
 - 适用于移动端、PC 端 Vue.js 图片预览插件
		
1.安装:npm install --save vue-picture-preview 2.使用: (1)入口文件中main.js中全局引入: import Vue from 'vue' import ...
 
随机推荐
- linux服务器磁盘挂载操作
			
具体操作是:先对磁盘进行格式化,格式化后挂载到需要的挂载点,最后添加分区启动表,以便下次系统启动随机自动挂载.1.首先查看系统中磁盘信息,命令为:fdisk -l; 2.找到未使用的磁盘,对其进行格式 ...
 - 前后端分离--ajaxUpload异步上传文件成功,前端获取数据却失败的解决方案
			
转载:https://blog.csdn.net/baidu_32809053/article/details/78709951
 - 【转载】大白话Docker入门(二)
			
原文:https://yq.aliyun.com/articles/63517?spm=a2c4e.11153940.blogcont63035.15.12011c3fddklk0 上篇的大白话Doc ...
 - Docker----起步(2)----在Ubuntu上安装最新版的Docker CE
			
之前写了一篇文章关于Docker安装的博客,最近再次使用的时候,在docker的官方文档上发现最新版本的Docker(V18.03)的安装方式和之前有点区别,有一些命令发现不能用了.(真的是一天不学习 ...
 - PDF怎么旋转页面,只需几步轻松搞定!
			
有时候我们下载一个PDF文件里面有页面是旋转的情况,用手机看的时候可以把手机旋转过来看,那么用电脑的时候总不可能也转过来看吧,笔记本是可以的台式的是不行的,这个时候我们就需要把PDF文件中旋转的页面转 ...
 - Spring Session产生的sessionid与cookies中的sessionid不一样的问题 && httpOnly 设置不起作用的问题??
			
背景: Springboot 2.0 (spring-session-data-redis + spring-boot-starter-web) 需求: 通过cookies中取到的 sessionid ...
 - js高级类型
			
一.funciton数据类型 1.定义:一个function类型对象,用于管理一个具体函数. function类型相当于Java中java.lang.reflect.Method 2.函数类型对象创建 ...
 - MVC Bundle生成的css路径问题
			
项目是嵌套在主站的一个子站点,结果用CssRewriteUrlTransform来将相对目录路径改成相对网站根目录路径的时候发现少了虚拟目录的路径.最终解决方案: /// <summary> ...
 - 关于pom.xml文件中引入net.sf.json-lib出错问题
			
关于pom.xml文件中引入net.sf.json-lib出错问题 在项目中引入以下依赖时一直报错 <dependency> <groupId>net.sf.json-lib& ...
 - vue-router路由模式
			
什么是单页应用? 单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web ...