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 ...
随机推荐
- java平台学习笔记
java程序从编写源码开始到程序执行一共有三个阶段,编写期,编译期,运行期. 通常,人们都希望自己的程序更快(不仅仅是执行更快,也有编写更快),因此java在不断更新. java源码先通过javac编 ...
- 服务器 隐藏php版本,nginx版本号等
隐藏php版本号: 打开php.ini配置文件 找到 expose_php 关键修改为 off 即可 重启后 web头部就不会有了 隐藏 nginx 服务器版本号: 打开nginx配置文件,在htt ...
- mingw-gcc-9.0.1-i686-posix-sjlj-201903
-------------------------------------------------------------------------------gcc version 9.0.1 201 ...
- npm vue ivew vue-cli3
2019-4-10 10:56:20 星期三 学习iview时需要搭建一套node环境, 这里记录下来 1. 下载安装nodejs //自带了npm包管理器 2. 设置npm的全局配置: 全局包默认 ...
- jssdk防覆盖
防覆盖 var isFromTuia = (function () { var tuiaDomains = ['tuisnake', 'localhost'] function GetUrlDomai ...
- Centos 7部署docker
master安装: 安装zookeeper -openjdk java--openjdk-headless rpm -i packages/mesosphere-zookeeper--.centos7 ...
- js圆形头像实现
定义CSS <style> .to{width:100px;height:100px;border-radius:100px} </style> 这样就实现了 主要是borde ...
- Android回调监听的实现
一.首先定义监听函数 public interface OnKeyValueListener { void getKeyValueClick(String value); } 二.在需要传递内容的 A ...
- Unity中各种格式计时器
问题背景: 在开发游戏过程中,很多地方需要倒计时,但是各种地方要的倒计时格式不同,倒计时都会写,在这里不详细介绍,写的目的就是为了记录一下,方便复用(为了在开发过程中不为了小问题浪费不必要脑细胞) 1 ...
- vertx模块DeploymentManager部署管理器
DeploymentManager public DeploymentManager(VertxInternal vertx) { this.vertx = vertx; loadVerticleFa ...