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. LeetCode刷题-005最长回文子串

    给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为1000.示例 1:输入: "babad"输出: "bab"注意: "ab ...

  2. XSS,CSRF,Cookie防劫持的处理

    Cookie与sessionHTTP天然是无状态的协议, 为了维持和跟踪用户的状态, 引入了Cookie和Session. Cookie包含了浏览器客户端的用户凭证, 相对较小. Session则维护 ...

  3. vue较深入的知识点

    1 理解何为虚拟节点 虚拟dom是什么? 虚拟dom就是通过js对象来模拟描述dom树,包括tag,attr, children等属性来代表标签名,属性,子元素等.由于不需要有操作dom的方法,所以比 ...

  4. scrollview 嵌套imageview显示长图

    起初使用代码如下:但是图片显示不全,上半截被截 <ScrollView android:layout_width="match_parent" android:layout_ ...

  5. Vue-计算属性和侦听属性

    复杂逻辑应使用计算属性而不应写在插值表达式{{ }}里 <div id="app"> 原值:{{ msg }} <br> 翻转后的值:{{ reverseM ...

  6. Dubbo+Nacos做注册中心和配置中心

    项目结构 相关代码 EchoService public interface EchoService { String echo(String msg); } DefaultEchoService @ ...

  7. c# 序列化效率比拼

    前言:作为开发人员,对象的序列化经常用到,特别是在现在前后端分离 采用json 交互 ,就将原来用过的几种方式总结了下,也算是做一个记录,顺便做了下性能测试. 1:内置 JavaScriptSeria ...

  8. IE兼容事件绑定V1.0

    想要兼容IE678,少用原型,因为它们没有完全实现ECMA-262规范 (function(window){ //兼容IE678时少用原型,因为它没有完全遵循ECMA-262规范 //衬垫代码:isA ...

  9. C++入门篇十二

    成员变量和成员属性: 静态成员函数和静态成员变量是不属于对象的,所以不占有空间,非静态成员是属于对象的,占有存储空间,空类大小1 #include "pch.h" #include ...

  10. 项目中的Git七步精髓

    项目中Git常用的七步操作: 1.git branch -a  查看所有分支 2.git checkout dev_yxq 如果冲突了,操作回退上一个版本, git status git checko ...