Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】


Posted in Javascript onNovember 04, 2019

本文实例讲述了Vue图片浏览组件v-viewer用法。分享给大家供大家参考,具体如下:

v-viewer

用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,基于viewer.js。

从0.x迁移

你需要做的唯一改动就是手动引入样式文件:

import 'viewerjs/dist/viewer.css'

安装

使用npm命令安装

npm install v-viewer

使用

引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用。

<template>
 <div id="app">
  <!-- directive -->
  <div class="images" v-viewer>
   <img src="1.jpg">
   <img src="2.jpg">
   ...
  </div>
  <!-- component -->
  <viewer :images="images">
   <img v-for="src in images" :src="src" :key="src">
  </viewer>
 </div>
</template>
<script>
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 import Vue from 'vue'
 Vue.use(Viewer)
 export default {
  data() {
   images: ['1.jpg', '2.jpg']
  }
 }
</script>

以指令形式使用

只需要将v-viewer指令添加到任意元素即可,该元素下的所有img元素都会被viewer自动处理。

你可以像这样传入配置项: v-viewer="{inline: true}"

如果有必要,可以先用选择器查找到目标元素,然后可以用el.$viewer来获取viewer实例。

<template>
 <div id="app">
  <div class="images" v-viewer="{movable: false}">
   <img v-for="src in images" :src="src" :key="src">
  </div>
  <button type="button" @click="show">Show</button>
 </div>
</template>
<script>
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 import Vue from 'vue'
 Vue.use(Viewer)
 export default {
  data() {
   images: ['1.jpg', '2.jpg']
  },
  methods: {
   show () {
    const viewer = this.$el.querySelector('.images').$viewer
    viewer.show()
   }
  }
 }
</script>

指令修饰器

static

添加修饰器后,viewer的创建只会在元素绑定指令时执行一次。

如果你确定元素内的图片不会再发生变化,使用它可以避免不必要的重建动作。

<div class="images" v-viewer.static="{inline: true}">
 <img v-for="src in images" :src="src" :key="src">
</div>

以组件形式使用

你也可以单独引入全屏组件并局部注册它。

使用作用域插槽来定制你的图片展示方式。

监听inited事件来获取viewer实例,或者也可以用this.refs.xxx.$viewer这种方法。

<template>
 <div id="app">
  <viewer :options="options" :images="images"
      @inited="inited"
      class="viewer" ref="viewer"
  >
   <template scope="scope">
    <img v-for="src in scope.images" :src="src" :key="src">
    {{scope.options}}
   </template>
  </viewer>
  <button type="button" @click="show">Show</button>
 </div>
</template>
<script>
 import 'viewerjs/dist/viewer.css'
 import Viewer from "v-viewer/src/component.vue"
 export default {
  components: {
   Viewer
  },
  data() {
   images: ['1.jpg', '2.jpg']
  },
  methods: {
   inited (viewer) {
    this.$viewer = viewer
   },
   show () {
    this.$viewer.show()
   }
  }
 }
</script>

配置项 & 方法

请参考viewer.js .

插件配置项

name

  • Type: String
  • Default: viewer

如果你需要避免重名冲突,可以像这样引入:

<template>
 <div id="app">
  <div class="images" v-vuer="{movable: false}">
   <img v-for="src in images" :src="src" :key="src">
  </div>
  <button type="button" @click="show">Show</button>
 </div>
</template>
<script>
 import 'viewerjs/dist/viewer.css'
 import Vuer from 'v-viewer'
 import Vue from 'vue'
 Vue.use(Vuer, {name: 'vuer'})
 export default {
  data() {
   images: ['1.jpg', '2.jpg']
  },
  methods: {
   show () {
    const vuer = this.$el.querySelector('.images').$vuer
    vuer.show()
   }
  }
 }
</script>

defaultOptions

  • Type: Object
  • Default: undefined

如果你需要修改viewer.js的全局默认配置项,可以像这样引入:

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer, {
 defaultOptions: {
  zIndex: 9999
 }
})

你还可以在任何时候像这样修改全局默认配置项:

import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
Viewer.setDefaults({
 zIndexInline: 2017
})

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
checkbox全选所涉及到的知识点介绍
Dec 31 Javascript
用unescape反编码得出汉字示例
Apr 24 Javascript
js获取客户端操作系统类型的方法【测试可用】
May 27 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
js实现页面刷新滚动条位置不变
Nov 27 Javascript
bootstrap fileinput实现文件上传功能
Aug 23 Javascript
elementUI中Table表格问题的解决方法
Dec 04 Javascript
JS根据json数组多个字段排序及json数组常用操作
Jun 06 Javascript
微信小程序转化为uni-app项目的方法示例
May 22 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
Nov 04 #Javascript
vue中使用GraphQL的实例代码
Nov 04 #Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 #Javascript
JS+CSS实现随机点名(实例代码)
Nov 04 #Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 #Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 #Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 #jQuery
You might like
千呼万唤始出来,DOTA2勇士令状不朽宝藏Ⅱ现已推出
2020/08/25 DOTA
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
ExtJS 2.0实用简明教程 之ExtJS版的Hello
2009/04/29 Javascript
新发现一个骗链接的方法(js读取cookies)
2012/01/11 Javascript
JQuery入门——用bind方法绑定事件处理函数应用介绍
2013/02/05 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
Javascript获取统一管理的提示语(message)
2016/02/03 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
AngularJs bootstrap搭载前台框架——准备工作
2016/09/01 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
详解Javascript 中的 class、构造函数、工厂函数
2017/12/20 Javascript
JS实现留言板功能[楼层效果展示]
2017/12/27 Javascript
vue2.0 路由不显示router-view的解决方法
2018/03/06 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
Python实现模拟时钟代码推荐
2015/11/08 Python
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
python游戏开发之视频转彩色字符动画
2019/04/26 Python
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
selenium+python配置chrome浏览器的选项的实现
2020/03/18 Python
香港卓悦化妆品官网:BONJOUR
2017/09/21 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
英国领先的高级美容和在线皮肤诊所:Face the Future
2020/06/17 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
小学评语大全
2014/04/22 职场文书
2015年财务部工作总结
2015/04/10 职场文书
教师节倡议书2015
2015/04/27 职场文书
2015年学校党建工作总结
2015/05/19 职场文书