Vue 中使用图片查看器 v-viewer

插件简介

基于 viewer.js 插件，用于 Vue 的图像查看器组件

官网地址：https://mirari.cc/v-viewer/

下载安装

通过 npm 安装：

npm install v-viewer

GitHub 下载地址：https://github.com/mirari/v-viewer

UMD 用法

Browser：

<link href="viewerjs/viewer.css" rel="stylesheet">
<script src="vue/vue.js"></script>
<script src="viewerjs/viewer.js"></script>
<script src="viewerjs/v-viewer.js"></script>
<!-- 指令形式 -->
<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>
<script>Vue.use(VueViewer.default)
</script>

CommonJS：

var VueViewer = require('VueViewer');

AMD：

require(['VueViewer'], function (VueViewer) {});

Vue 指令形式用法

只需要将 v-viewer 指令添加到任意元素即可，该元素下的所有 img 元素都会被 viewer 自动处理。

可以传入 options 配置项：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').$viewerviewer.show()}}}
</script>

指令修饰器：static

添加修饰器后台，viewer 的创建只会在元素绑定指令时执行一次。

如果你确定元素内的图片不会再发生变化，使用它可以避免不必要的重建动作。

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

Vue 组件形式用法

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

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

监听 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 这篇文章：https://blog.csdn.net/liang_wf/article/details/102561670

1、name：String，默认值为 viewer

为了避免重名冲突，可以添加 name 配置项，代码引入如下：

<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').$vuervuer.show()}}}
</script>

2、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
})

Vue 中使用图片查看器 v-viewer相关推荐

Element-ui中使用图片查看器（el-image-viewer) 预览图片
1. 简介注意:本文 Element-ui 版本 2.11.1及以上 Element-ui 官方文档中有大图预览相关组件传送门:Element-ui 图片组件,但我们不想通过使用 Image 组件 ...
强大的jQuery图片查看器插件Viewer.js
简介 Viewer.js 是一款强大的图片查看器 Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动 ...
vue图片查看器，支持放大缩小还原
Vue中使用图片查看器如何使用项目中使用的是 vue + element-ui 要求查看图片时能够实现图片放大缩小翻转等功能,于是找到一个适合的插件,首先看下效果: 功能与我们设想的一样,下面看 ...
前端实现图片查看器（滚轮放大，缩小，旋转）——Viewer.js
一.前端实现图片查看器(放大,缩小,旋转)--Viewer.js [附参考链接:(14条消息) Viewer.js第一次点击图片无法显示解决方案(vue使用)_李墨瞳的博客-CSDN博客] 1.0 J ...
win10照片查看器_图片打开方式中找不到Windows图片查看器怎么办
如何在电脑中使用默认的windows图片查看器来打开图片进行查看的?有时我们可能无法找到Windows图片查看器工具,接下来小编就与大家分享,一种简单的利用windows图片查看器查看图片的具体方法. ...
viewer.js图片查看器
viewer.js插件(vue) Viewer.js 是一款强大的图片查看器,像门户网站一般都会有各自的图片查看器,如果您正需要一款强大的图片查看器,也许 Viewer.js 是一个很好的选择.Vie ...
html手机端的图片阅读器,兼容移动端与电脑端的图片查看器viewer.js插件
Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片移动支持键盘支持全屏幻灯片模式(可做屏保) 支持缩略 ...
图片在线预览html,Viewer.js – 强大的JS/jQuery图片查看器
Viewer.js – 强大的JS/jQuery图片查看器分类:代码日期:2016-08-04 点击(282,284) 下载(1) 来源:未知收藏简介 Viewer.js 是一款强大的图片查看 ...
如何在Win10中使用Windows图片查看器打开图片
很多朋友在使用Win10中,可能觉得Win10自带的图片查看器打开比较慢,因此这里提供一个在Win10使用Windows图片查看器来查看图片的方式. 首先,按徽标键+R键打开运行,然后输入Regedi ...

Vue 中使用图片查看器 v-viewer

插件简介

下载安装

UMD 用法

Vue 指令形式用法

Vue 组件形式用法

插件配置项

Vue 中使用图片查看器 v-viewer相关推荐

最新文章

热门文章