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 相关文章推荐
jQuery bind事件使用详解
May 05 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
Apr 01 Javascript
从数据结构的角度分析 for each in 比 for in 快的多
Jul 07 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
Aug 25 Javascript
jQuery中add()方法用法实例
Jan 08 Javascript
angularjs手动识别字符串中的换行符方法
Oct 02 Javascript
CountUp.js数字滚动插件使用方法详解
Oct 17 Javascript
JS 事件机制完整示例分析
Jan 15 Javascript
javascript实现前端分页效果
Jun 24 Javascript
Vue 监听元素前后变化值实例
Jul 29 Javascript
JavaScript 去重和重复次数统计
Mar 31 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
使用vs code编辑调试php配置的方法
2019/01/29 PHP
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
jQuery实现预加载图片的方法
2015/03/17 Javascript
jquery表单验证插件(jquery.validate.js)的3种使用方式
2015/03/28 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
使用Bootstrap美化按钮实例代码(demo)
2017/02/03 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
nginx部署访问vue-cli搭建的项目的方法
2018/02/12 Javascript
Vue的路由动态重定向和导航守卫实例
2018/03/17 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
node实现爬虫的几种简易方式
2019/08/22 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
[02:07]2017国际邀请赛中国区预选赛直邀战队前瞻
2017/06/23 DOTA
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
Python selenium 加载并保存QQ群成员,去除其群主、管理员信息的示例代码
2020/05/28 Python
opencv 图像加法与图像融合的实现代码
2020/07/08 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
应届生面试求职信
2014/07/02 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2014年质检工作总结
2014/11/26 职场文书
岗位职责范本大全
2015/02/26 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
成绩单家长意见
2015/06/03 职场文书
Vue3 Composition API的使用简介
2021/03/29 Vue.js
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Java生成日期时间存入Mysql数据库的实现方法
2022/03/03 Java/Android
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python