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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
jQuery向父辈遍历的简单方法
Sep 18 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
jquery购物车结算功能实现方法
Oct 29 Javascript
vue.js实现仿原生ios时间选择组件实例代码
Dec 21 Javascript
Vue封装一个简单轻量的上传文件组件的示例
Mar 21 Javascript
JavaScript实现简单计算器功能
Dec 19 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
德生PL990的分析评价
2021/03/02 无线电
php&amp;java(二)
2006/10/09 PHP
PHP4中session登录页面的应用
2008/07/25 PHP
php环境配置之CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI比较?
2011/10/17 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
JavaScript 中的事件教程
2007/04/05 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
js实现一个省市区三级联动选择框代码分享
2013/03/06 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
两种js监听滚轮事件的实现方法
2016/05/13 Javascript
修改js confirm alert 提示框文字的简单实例
2016/06/10 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
2016/11/25 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
js实现无缝轮播图特效
2020/05/09 Javascript
vue使用Sass时报错问题的解决方法
2020/10/14 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
python 求一个列表中所有元素的乘积实例
2019/06/11 Python
PyQt5+python3+pycharm开发环境配置教程
2020/03/24 Python
python中tab键是什么意思
2020/06/18 Python
Python 解析库json及jsonpath pickle的实现
2020/08/17 Python
Python通过字典映射函数实现switch
2020/11/06 Python
法律专业应届本科毕业生求职信
2013/10/25 职场文书
职业培训师职业生涯规划
2014/02/18 职场文书
学校三八妇女节活动情况总结
2014/03/09 职场文书
工商局领导班子存在的问题整改措施思想汇报
2014/10/05 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
社区好人好事材料
2014/12/26 职场文书
慰问信格式规范
2015/03/23 职场文书