首页 > 其他分享 >v-viewer图片预览插件使用

v-viewer图片预览插件使用

时间:2022-09-30 18:24:47浏览次数:94  
标签:插件 预览 缩放 viewer 是否 默认 true 图片

链接:https://www.jianshu.com/p/1fd3b4e6911c

今天介绍一款用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,它是基于viewer.js做的二次开发,我感觉用起来挺方便的,Github地址:https://github.com/mirari/v-viewer

  预览效果

一、安装

npm install v-viewer --save

二、使用

1.指令方式使用

只需要将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 () {
        //获取viewer实例
        const viewer = this.$el.querySelector('.images').$viewer
        //调用show方法进行显示预览图
        viewer.show()
      }
    }
  }
</script>

2.组件方式使用

<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 () {
        //调用$viewer的show方法,默认显示第一张图片
        this.$viewer.show()
        //如果需要指定显示某一张图片使用view方法,index是指定的那张图片所在数组的位置索引
        //this.$viewer.view(index)
      }
    }
  }
</script>

三、Options配置项说明

'inline': true, // 是否启用inline模式

'button': true, // 是否显示右上角关闭按钮

'navbar': true, // 是否显示缩略图底部导航栏

'title': true, // 是否显示当前图片标题,默认显示alt属性内容和尺寸

'toolbar': true, // 是否显示工具栏

'tooltip': true, // 放大或缩小图片时,是否显示缩放百分比,默认true

'fullscreen': true, // 播放时是否全屏,默认true

'loading': true, // 加载图片时是否显示loading图标,默认true

'loop': true, // 是否可以循环查看图片,默认true

'movable': true, // 是否可以拖得图片,默认true

'zoomable': true, // 是否可以缩放图片,默认true

'rotatable': true, // 是否可以旋转图片,默认true

'scalable': true, // 是否可以翻转图片,默认true

'toggleOnDblclick': true, // 放大或缩小图片时,是否可以双击还原,默认true

'transition': true, // 使用 CSS3 过度,默认true

'keyboard': true, // 是否支持键盘,默认true

'zoomRatio': 0.1, // 鼠标滚动时的缩放比例,默认0.1

'minZoomRatio': 0.01, // 最小缩放比例,默认0.01

'maxZoomRatio': 100, // 最大缩放比例,默认100

'url': 'data-source' // 设置大图片的 url

四、备注

1.中文文档
2.在线调试参数查看效果
3.代码示例

标签:插件,预览,缩放,viewer,是否,默认,true,图片
From: https://www.cnblogs.com/fswhq/p/16745784.html

相关文章

  • chrome插件下载地址
    收藏猫:https://chrome.pictureknow.com/Chrome官方应用店只支持在线安装不支持将安装包.crx保存到本地,我们可以通过第三方Chrome扩展插件下载网站获取需要的.crx安装......
  • 获取图片并预览
    环境介绍:代码工具:VisualStudio2022开发框架:.netformwork4.7.2开发须知当前我所了解的有.netcore以及.netformwork两种框架.netformwork:这个是微软专用......
  • 分享一个Vue实现图片水平瀑布流的插件
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我突然想起我很久......
  • Vue插件
    Vue插件插件作用插件通常用来为Vue添加全局功能例如:1、添加全局资源:指令/过滤器/过渡等。如vue-touch2、通过全局混入来添加一些组件选项。3、添加Vue实例方法,......
  • spotbugs插件汉化
    spotbugs-translatespotbugs汉化,目前使用百度翻译进行机翻已经汉化好的插件(使用IDEA的InstallPluginfromDisk选择zip文件再重新安装):https://github.com/tyzou/spotb......
  • VUE2速成-5(插件及打包)
    文章目录​​一、Vue的插件大全​​​​二、Vue插件举例​​​​1.轮播图插件(vue-awesome-swiper)​​​​2.UI组件库(ElementUI)​​​​三、vue-cli打包部署​​一、Vue的......
  • VSCode 插件
    我的全部插件必安装项ChineseSimplified(中文)ColorInfo(识别颜色)CodeRunner(运行各种代码)PrettierFormatter(格式化代码)OneDarkPro(更改主题颜色)OpenFolderCont......
  • RabbitMQ 入门系列:10、扩展内容:延时队列:延时队列插件及其有限的适用场景(系列大结局)。
    系列目录​​RabbitMQ入门系列:1、MQ的应用场景的选择与RabbitMQ安装。​​​​RabbitMQ入门系列:2、基础含义:链接、通道、队列、交换机。​​​​RabbitMQ入门系列:3、基础......
  • 【Unity】浅尝xlua热更新插件
    前言之前的学习中了解到了一些热更新的知识,本想系统地学习基于xLua的热更新框架,但时间紧迫,遂浅尝辄止。在此记录一下相关知识。什么是热更新从云端下载资源包,这些新资源......
  • eclipse插件:打开选中文件所在的目录
    easyexplore是一个eclipse的小插件,它能直接打开选中文件所在的目录下载: 地址:​​http://sourceforge.net/projects/easystruts/files/​​,我下载的是org.sf.easyexplore_1.......