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中,照片应用提供了时间线.专辑等更丰富的图片管理功能,但是对于基于文件夹打开浏览图片的方式显得笨拙, 放大缩小操作略繁琐,有时还会出现当前文件夹图片加载迟缓导致无法快速浏览的问题. 此时你 ...
 
随机推荐
- C语言备忘录——qsort
			
写了这么久的排序感觉还是用现成的最舒服.其实C语言其实自己带了一个快速排序在stdlib 库里,但是其函数调用的接口过于复杂,所以让人望而却步.为了加深自己的记忆,所以写下这篇博客 先来看一下函数原型 ...
 - windows中的运行命令
			
首先按“开始”-“运行”,或按WIN键+R,进入『运行』窗口. 下面是常用的运行命令 (按英文字符顺序排列) appwize.cpl----添加.删除程序 access.cpl-----辅助功能选项 ...
 - 126-PHP类__get()魔术方法
			
<?php class ren{ //定义人类 //定义成员属性 private $name='Tom'; private $age=15; //定义__get()魔术方法 public fun ...
 - 吴裕雄--天生自然C++语言学习笔记:C++ STL 教程
			
C++ STL(标准模板库)是一套功能强大的 C++ 模板类,提供了通用的模板类和函数,这些模板类和函数可以实现多种流行和常用的算法和数据结构,如向量.链表.队列.栈. C++ 标准模板库的核心包括以 ...
 - 51NOD1050 循环数组最大字段和
			
N个整数组成的循环序列a11,a22,a33,…,ann,求该序列如aii+ai+1i+1+…+ajj的连续的子段和的最大值(循环序列是指n个数围成一个圈,因此需要考虑an−1n−1,ann,a11, ...
 - FTP故障排除
			
1,ping 检查 IP是否通 禁PING可以使用TCPING 2,服务器端被动模式设置,可设置固定端口号,保证防火墙上该端口畅通 浏览器默认是主动模式 3,使用FLASHFXP软件可以监测到数据端口 ...
 - java嵌套循环练习
			
打印一个等腰三角形 package com.lv.jj; import java.util.Scanner; public class DemoDy { public static void main ...
 - MBE风格图标
			
图标的定义 图标是一种通过相似性或类比行来代表对象的符号. 图标的重要性 1.图形以其无与伦比的识别性带来信息传达效率的提升. 2.图形以其百变多样的趣味性带来视觉体验的享受提成用户体验. 3.图形以 ...
 - Yota Phone宣告破产
			
作为双面屏手机的开山鼻祖,Yota Phone已经消失在大家的视线中. 据外媒报道称,开曼群岛最高法院裁定在开曼群岛注册的YotaPhone手机生产商Yota Devices公司破产.法院的相关裁定被 ...
 - js interval ,timeout
			
var inter; intervatest("2019-08-22 09:12:00"); function intervatest(str) { ShowCountDown(s ...