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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
javascript 正则替换 replace(regExp, function)用法
May 22 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
jQuery输入框密码的显示隐藏【代码分享】
Apr 29 jQuery
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
分析JS中this引发的bug
Dec 12 Javascript
vue路由组件按需加载的几种方法小结
Jul 12 Javascript
vuejs简单验证码功能完整示例
Jan 08 Javascript
vue+element实现表单校验功能
May 20 Javascript
详解node和ES6的模块导出与导入
Feb 19 Javascript
Vue接口封装的完整步骤记录
May 14 Vue.js
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
基于mysql的bbs设计(一)
2006/10/09 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
一个javascript图片阅览组件
2010/11/09 Javascript
js判断背景图片是否加载成功使用img的width实现
2013/05/29 Javascript
jQuery中bind()方法用法实例
2015/01/19 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
个人网站留言页面(前端jQuery编写、后台php读写MySQL)
2016/05/03 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
Vue+ElementUI 中级联选择器Bug问题的解决
2020/07/31 Javascript
python脚本设置超时机制系统时间的方法
2016/02/21 Python
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
wxpython中自定义事件的实现与使用方法分析
2016/07/21 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
python django model联合主键的例子
2019/08/06 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python定时发送天气预报邮件代码实例
2019/09/09 Python
4行Python代码生成图像验证码(2种)
2020/04/07 Python
python 等差数列末项计算方式
2020/05/03 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
python 如何停止一个死循环的线程
2020/11/24 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
《理想的风筝》教学反思
2014/04/11 职场文书
主持人大赛开场白
2015/05/29 职场文书
JavaScript中isPrototypeOf函数
2021/11/07 Javascript