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 有用的脚本函数
May 07 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
javascript移动开发中touch触摸事件详解
Mar 18 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
canvas 弹幕效果(实例分享)
Jan 11 Javascript
Bootstrap超大屏幕的实现代码
Mar 22 Javascript
关于webpack2和模块打包的新手指南(小结)
Aug 07 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
Kettle中使用JavaScrip调用jar包对文件内容进行MD5加密的操作方法
Sep 04 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
php_imagick实现图片剪切、旋转、锐化、减色或增加特效的方法
2014/12/15 PHP
Symfony2学习笔记之插件格式分析
2016/03/17 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
jQuery基础框架浅入剖析
2012/12/27 Javascript
javascript中的this详解
2014/12/08 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
JS实现当前页居中分页效果的方法
2015/06/18 Javascript
JS组件Bootstrap Select2使用方法详解
2020/04/17 Javascript
JavaScript实现的MD5算法完整实例
2016/02/02 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
详解BootStrap中Affix控件的使用及保持布局的美观的方法
2016/07/08 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
基于Node.js模板引擎教程-jade速学与实战1
2017/09/17 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
2018/04/26 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
2019/04/13 Javascript
浅谈Node 异步IO和事件循环
2019/05/05 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[02:35]DOTA2英雄基础教程 狙击手
2014/01/14 DOTA
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
keras处理欠拟合和过拟合的实例讲解
2020/05/25 Python
python中温度单位转换的实例方法
2020/12/27 Python
python使用matplotlib的savefig保存时图片保存不完整的问题
2021/01/08 Python
HTML5事件方法全部汇总
2016/05/12 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
CHARLES & KEITH英国官网:新加坡时尚品牌
2018/07/04 全球购物
大学生思想汇报范文
2013/12/31 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
会计专业应届生自荐信
2014/02/07 职场文书
员工趣味活动方案
2014/08/27 职场文书
实习生工作证明范本
2014/09/14 职场文书
Go timer如何调度
2021/06/09 Golang
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python