vue实现图片预览viewer.js

LinDon_

已于 2023-04-14 11:34:09 修改

阅读量3.6k

点赞数

分类专栏： VUE 文章标签： vue.js javascript 前端

于 2022-08-04 14:05:46 首次发布

本文链接：https://blog.csdn.net/weixin_46252229/article/details/126158216

版权

VUE 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

Viewer.js

开源图片预览插件
项目中使用
官方文档

开源图片预览插件

支持移动设备触摸事件
支持响应式
支持放大/缩小
支持旋转（类似微博的图片旋转）
支持水平/垂直翻转
支持图片移动
支持键盘
支持全屏幻灯片模式（可做屏保）
支持缩略图
支持标题显示
支持多种自定义事件

配置参数
在这里插入图片描述

项目中使用

1、安装

npm install v-viewer -S

mian.js 引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
  // 需要配置的属性 注意属性并没有引号
  title: false,
  toolbar: false
})

3、使用

<template>
  <viewer  :images="ImgsList ">
    <img v-for="(decImg, index) in ImgsList " :key="index" :src="decImg" style="width: 200px;height: 200px">
  </viewer>
</template>

<script>
export default {
  data () {
    return {
      ImgsList : [
       'https://image.baidu.com/search/index?ct=201326592&z=undefined&tn=baiduimage&ipn=d&word=%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%20%E5%A4%9A%E7%AB%AF%20vue&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=3577646019,3932208459&os=1254406184,698698580&simid=4256257069,775878501&pn=201&di=7108135681917976577&ln=1761&fr=&fmq=1659593192472_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=96&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fpic1.zhimg.com%252Fv2-9abcfdded8a3b95fbfc0084210c665c5_1200x500.jpg%26refer%3Dhttp%253A%252F%252Fpic1.zhimg.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1662185194%26t%3D7de2289cc196b7460e6a5749b7eeb533&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&tt=1&dyTabStr=MCw2LDQsNSwzLDEsNyw4LDIsOQ%3D%3D',
        'https://image.baidu.com/search/index?ct=201326592&z=undefined&tn=baiduimage&ipn=d&word=%E5%9B%BE%E7%89%87%E9%A2%84%E8%A7%88%20%E5%A4%9A%E7%AB%AF%20vue&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=undefined&hd=undefined&latest=undefined&copyright=undefined&cs=4248538567,3012407339&os=2601970863,3033525754&simid=4098984572,595666676&pn=605&di=7108135681917976577&ln=1761&fr=&fmq=1659593192472_R&fm=&ic=undefined&s=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&is=0,0&istype=0&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=23a&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fcdn.javanx.cn%252Fwp-content%252Fthemes%252Flensnews2.2%252Fimages%252Fpost%252F20190409153304.jpg%26refer%3Dhttp%253A%252F%252Fcdn.javanx.cn%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1662185234%26t%3Da0f7b062352cf5b450f5d2d66940d8b5&rpstart=0&rpnum=0&adpicid=0&nojc=undefined&tt=1&dyTabStr=MCw2LDQsNSwzLDEsNyw4LDIsOQ%3D%3D',
 
      ]
    }
  }
}
</script>