v-viewer:一款好用的图片查看器插件

我的工作日常经常会碰到图片预览的功能,用的比较多,所以今天给大家分享一款使用简单,功能强大的插件v-viewer,希望能帮助到你们。下面视频是简单的演示!

demo地址:https://mirari.cc/v-viewer/

github地址:https://github.com/mirari/v-viewer.git

v-viewer是基于viewer.js封装的vue组件。viewer.js组件还分为jquery版本和JS版本,内置属性和方法大致相同,今天我们了解下vue版的使用方法。

主要功能:

 

  • 支持选项
  • 支持方法
  • 支持事件
  • 支持触摸
  • 支持移动
  • 支持缩放
  • 支持旋转
  • 支持键盘
  • 跨浏览器支持

 

首先是安装

npm install v-viewer --save

使用

引入v-viewer及必需的css样式,并使用Vue.use()注册插件,之后即可使用。

使用形式有两种:指令形式组件形式

<template>
  <div id="app">
    
    <div class="images" v-viewer>
      <img src="1.jpg">
      <img src="2.jpg">
      ...
    div>
    
    <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必须是数组
      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">Showbutton>
     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的创建只会在元素绑定指令时执行一次。
如果你确定元素内的图片不会再发生变化,使用它可以避免不必要的重建动作。

class=“images” v-viewer.static=“{inline: true}”> <img v-for=“src in images” :src=“src” :key=“src”> div>

rebuild

默认情况下当图片发生变更时(添加、删除或排序),viewer实例会使用update方法更新内容。

如果你遇到任何显示问题,尝试使用重建来代替更新。

class=“images” v-viewer.rebuild=“{inline: true}”> <img v-for=“src in images” :src=“src” :key=“src”> div>

以组件形式使用

你也可以单独引入全屏组件并局部注册它。

使用作用域插槽来定制你的图片展示方式。

<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">Showbutton>
  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>

组件属性

images

 

  • 类型: Array

 

trigger

 

  • 类型: Array

 

你可以使用trigger来代替images, 从而传入任何类型的数据。

当trigger绑定的数据发生变更,组件就会自动更新。

<viewer :trigger="externallyGeneratedHtmlWithImages">
  <div v-html="externallyGeneratedHtmlWithImages"/>
viewer>

rebuild

 

  • 类型: Boolean
  • 默认值: false

 

默认情况下当图片发生变更时(添加、删除或排序),viewer实例会使用update方法更新内容。

如果你遇到任何显示问题,尝试使用重建来代替更新。

"viewer"
  :options="options"
  :images="images"
  rebuild
  class="viewer"
  @inited="inited"
>
  <template slot-scope="scope">
    <img v-for="src in scope.images" :src="src" :key="src">
    {{scope.options}}
  template>
viewer>

组件事件

inited

 

  • viewer: Viewer

 

监听inited事件来获取viewer实例,或者也可以用this.refs.xxx.$viewer这种方法。

配置项 & 方法

请参考viewer.js.

分享一款好用的图片查看器插件v-viewer,谁用谁知道

插件配置项

name

 

  • 类型: String
  • 默认值: 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">Showbutton>
  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

类型: Object

 

  • 默认值: 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
})
分享一款好用的图片查看器插件v-viewer,谁用谁知道

结尾:希望艺宵的每篇文章对你都有所帮助!

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.net/share/20274.html

发表评论

登录后才能评论

评论列表(1条)

  • 954879212
    954879212 2021-08-27 00:51

    居然比官网还好用! (⊙o⊙)。官网组件部分的局部引用写得真不好理解。