vue图片查看器
vue 安装图片查看器插件
安装
cnpm install v-viewer
引用
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
用法
render函数中调用 异步加载,西药render之后马上给图片数组赋值,否则报错;
render: (h, params) => {
this.imageUrls = [
"http://t2.hddhhn.com/uploads/tu/20150700/akgj2qchk3z.jpg",
"../../../../../static/img/img/anchor.png",
"../../../../../static/img/img/iocn-worker.png"
];
return h("div", {、、。。。。。
传入配置项: v-viewer="{inline: true}"
el.$viewer来获取viewer实例
TEMPLETE
<div class="ima" v-viewer.static="{inline: true}" v-viewer="{movable: true}">
<img v-show="false" v-for="src in imgs" :src="src" :key="src">
</div>
<button type="button" @click="show">Show</button>
data() {
return {
imgs: [
"http://10.0.197.142:80/group1/M00/00/04/CgDFjluGUkeAO0XsAAJPSIeXcMI935.jpg",
"http://10.0.197.142:80/group1/M00/00/04/CgDFjluGUkeAO0XsAAJPSIeXcMI935.jpg",
"http://10.0.197.142:80/group1/M00/00/04/CgDFjluGUkeAO0XsAAJPSIeXcMI935.jpg",
]
};
},
methods: {
show() {
const viewer = this.$el.querySelector(".ima").$viewer;
viewer.show();
}
},
//end
vue图片查看器的更多相关文章
- wpf 仿QQ图片查看器
参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...
- 发布两款JQ小插件(图片查看器 + 分类选择器),开源
图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...
- wpf图片查看器,支持鼠标滚动缩放拖拽
最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...
- 用JQ仿造礼德财富网的图片查看器
现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...
- 基于jQuery的一个简单的图片查看器
项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...
- Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器
新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView 两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...
- Window Phone 8 应用程序连接扩展图片中心,图片扩展,图片查看器
WMAppManifest.xml <?xml version="1.0" encoding="utf-8"?> <Deployment xm ...
- js手写图片查看器(图片的缩放、旋转、拖拽)
在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...
- Win 10中使用图片查看器
在Win10中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你 ...
随机推荐
- Gym - 101190F Foreign Postcards (期望dp)
题意:有n张标有“C”或“F”的卡片. 1.随机取前k张(1<=k<=n) 2.若这k张的第一张为“C”,则不翻转,否则,全部翻转这k张. 3.然后处理剩下的n-k张 4.重复步骤1~3直 ...
- 《Java并发编程的艺术》并发编程的基础(四)
一.线程简介 1.线程的概念 系统运行的最小单元 2.为何使用多线程 更好地利用系统资源(处理器多核心),提高响应速度. 3.线程的状态 NEW(创建状态) RUNABLE(运行状态,系统调度,争抢时 ...
- servlet 之 servlet接口详解
package javax.servlet; //Tomcat源码版本:6.0.20 import java.io.IOException; public interface Servlet { ...
- CF1209A Paint the Numbers
You are given a sequence of integers a1,a2,…,an. You need to paint elements in colors, so that: If w ...
- Codeforces 392 C Unfair Poll(模拟)
题意:老师点名顺序规则如下:第1排,第2排,……,第n-1排,第n排,第n-1排,……,第2排,第1排,第2排,……,第n-1排,第n排,……对于每排都是从左到右依次点名,问点名k个人后,所有人中最多 ...
- tx2系统备份与恢复
https://blog.csdn.net/ycy_dy/article/details/80493392 https://blog.csdn.net/piaopiaopiaopiaopiao/art ...
- 方便快捷组织页面 DOM 的 js 引模板擎 —— doT.js 的使用
—————————————————————————————————————————— ——————————————————————————————————————————
- TypeScript——枚举类型
enum类型是对JavaScript标准数据类型的一个补充. 在运行环境下编译成对象, 可用属性名索引, 也可用属性值索引.而其实现原理为:反向映射 (如下例) 数字枚举 enum Role { ...
- Cookie简单介绍
Cookie 饼干. 其实是一份小数据, 是服务器给客户端,并且存储在客户端上的一份小数据 应用场景 自动登录.浏览记录.购物车. 为什么要有这个Cookie http的请求是无状态. 客户端与服务器 ...
- WindowsForm ComboBoxList 下拉框带复选框 可以动态添加
先来张效果图: 1.这里需要对控件进行重写,详细内容如下,对此不感兴趣的可以直接跳过这步,下载本人生成的dll,直接看第二小结,下载链接https://pan.baidu.com/s/1gfzrK5t ...