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图片查看器的更多相关文章

  1. wpf 仿QQ图片查看器

    参考博客 WPF下的仿QQ图片查看器 wpf图片查看器,支持鼠标滚动缩放拖拽 实现效果 主要参考的WPF下的仿QQ图片查看器,原博主只给出了部分代码. 没有完成的部分 1.右下角缩略图是原图不是缩略图 ...

  2. 发布两款JQ小插件(图片查看器 + 分类选择器),开源

    图片查看器,github地址:https://github.com/VaJoy/imgViewer 效果如下: 这款当初大概写了2小时,有点匆忙地赶出来的,使用的接口很简单: $.bindViewer ...

  3. wpf图片查看器,支持鼠标滚动缩放拖拽

    最近项目需要,要用到一个图片查看器,类似于windows自带的图片查看器那样,鼠标滚动可以缩放,可以拖拽图片,于是就写了这个简单的图片查看器. 前台代码: <Window x:Class=&qu ...

  4. 用JQ仿造礼德财富网的图片查看器

    现在就职于一家P2P平台,自然也会关注同行其它网站的前端技术,今天要仿造的是礼德内页的一个图片查看器效果.不过说白了,无论人人贷也好礼德财富也好,很多地方的前端都做的不尽如人意,比如忽略细节.缺乏交互 ...

  5. 基于jQuery的一个简单的图片查看器

    项目中自己diy了一个图片查看器.因为初始代码不是自己的,只是在上面改了一下也没有弄的很漂亮.等以后有时间了在重写一下样式和封装,作为备用的只是积累吧.如果有童鞋有用到,完全可以在此基础上改,比较容易 ...

  6. Objective-C ,ios,iphone开发基础:快速实现一个简单的图片查看器

    新建一个single view 工程: 关闭ARC , 在.xib视图文件上拖放一个UIImageView  两个UIButton ,一个UISlider ,布局如图. 并为他们连线, UIImage ...

  7. Window Phone 8 应用程序连接扩展图片中心,图片扩展,图片查看器

    WMAppManifest.xml <?xml version="1.0" encoding="utf-8"?> <Deployment xm ...

  8. js手写图片查看器(图片的缩放、旋转、拖拽)

    在做一次代码编辑任务中,要查看图片器.在时间允许的条件下,放弃了已经封装好的图片jq插件,现在自己手写js实现图片的缩放.旋转.推拽功能! 具体代码如下: <!DOCTYPE html> ...

  9. Win 10中使用图片查看器

    在Win10中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你 ...

随机推荐

  1. Gym 101158D(暴力)

    题意:给定两个长度为N的字符串,1<=N<=4000,求满足字符串1中的某个区间所有的字母种类和个数都与字符串2中的某个区间相同最长的区间长度. 分析: 1.预处理每个串字母个数的前缀和. ...

  2. OSDA - 一个以MIT协议开源的串口调试助手

    市场其实有很多开源的串行端口调试助手(Open Serial Port debug assistant),但其中很大一部分没有明确的开源协议,还有一部分只限个人使用,所以编写了一个并以MIT协议授权开 ...

  3. Exchange Server 2010邮件策略与遵从性

    本文档附带了一个附档,里面详细的描述了如何在Exchange Server 2010中配置如下内容: 1.邮件分类 2.免责申明 3.配置信息隔离墙 4.邮件审核 5.Exchange 2010与AD ...

  4. gpasswd命令 gpasswd -a user_name group_name

    最后一句 gpasswd命令是Linux下工作组文件/etc/group和/etc/gshadow管理工具. 语法 gpasswd(选项)(参数) 选项 -a:添加用户到组: -d:从组删除用户: - ...

  5. Pycharm连接Mysql失败. [08001] Could not create connection to database server.

    使用Pycharm连接MySQL时遇到如下问题,错误代码[08001] 查了很多资料归纳一下可能是如下几个原因 0.mysql.server没开 找到对应系统下的mysql.server 启动/重启命 ...

  6. 六十六、SAP中代码格式化功能(SHIFT+F1)

    一.在Delphi或PHP中,都有代码格式化工具,SAP中也有,如图 二,点击之后,没有任何反应,提示功能没有开启 三.在实用程序->设置中,选择好相关内容 四.勾选自己的相关设置 五.再点击代 ...

  7. elasticsearch下载与安装

    目录 安装之前 下载 安装 测试 安装之前 必须注意的是:安装路径不允许有中文及空格和非法字符,尤其是中文 下载 打开elasticsearch官网.选择免费试用. 选择对应产品与版本(选择6.5.4 ...

  8. 图解HTTP阅读笔记2

    TCP协议:三次握手,C端——>SYN——>S端: S端——>SYN/ACK——>C端: C端——>ACK——>S端. 特点:字节流服务,把大块数据分割成以报文段为 ...

  9. mysql 分组查询教程

    1.分组 分组就是将一个“数据集”划分成若干个“小区域”,然后针对若干个“小区域”进行数据处理. 2.分组的特点 1.)group by的含义:将查询结果按照1个或多个字段进行分组,字段值相同的为一组 ...

  10. arduino双机通信 (解决引脚不够用)

    作用 实现将一个 arduino 中的多个 String 类型变量准确地传到另一个 arduino 中对应的多个 String 类型变量 中. 接线图 注意 TX 接另一个arduino的 RX !可 ...