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异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
使用jQuery避免鼠标双击的解决方案
Aug 21 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
JavaScript实现数组随机排序的方法
Jun 26 Javascript
javascript如何写热点图
Dec 08 Javascript
原生javascript实现addClass,removeClass,hasClass函数
Feb 25 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
关于JavaScript限制字数的输入框的那些事
Aug 14 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
Nov 07 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实现短域名互转
2013/07/05 PHP
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
laravel框架中路由设置,路由参数和路由命名实例分析
2019/11/23 PHP
javascript 获取网页参数系统
2008/07/19 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
jQuery焦点图切换简易插件制作过程全纪录
2014/08/27 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
jQuery往返城市和日期查询实例讲解
2015/10/09 Javascript
老生常谈jquery id选择器和class选择器的区别
2017/02/12 Javascript
详解Javascript获取缓存和清除缓存API
2017/05/25 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
Vue+ElementUI实现表单动态渲染、可视化配置的方法
2018/03/07 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
2018/03/13 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
简单实现Python爬取网络图片
2018/04/01 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
快速创建python 虚拟环境
2020/11/28 Python
HTML5-WebSocket实现聊天室示例
2016/12/15 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
会计专业自我鉴定
2014/02/10 职场文书
个人三严三实对照检查材料
2014/09/25 职场文书
领导班子个人查摆问题对照检查材料
2014/10/02 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
办公室主任个人总结
2015/02/28 职场文书
导游词之西安大清真寺
2019/12/17 职场文书
python基础之爬虫入门
2021/05/10 Python
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫