侧边栏壁纸
博主头像
神奇的程序员

今天的努力只为未来

  • 累计撰写 169 篇文章
  • 累计创建 26 个标签
  • 累计收到 221 条评论

目 录CONTENT

文章目录

Vue图片浏览插件v-viewer的使用

神奇的程序员
2020-02-08 / 0 评论 / 1 点赞 / 526 阅读 / 1,048 字 正在检测是否收录...

永远对生活充满希望,对于困境与磨难,微笑应对。

前言

在项目中点击小图查看大图,对大图进行旋转、放大、缩小是个很常见的需求,今天就跟大家分享下v-viewer插件如何在vue项目中使用。先看下最终实现的效果(图片较大,点击链接进行查看)

gif效果图

安装插件

  • 终端执行
yarn add v-viewer

使用插件

  • 在main.js中添加如下代码
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'

// 图片加载插件
Vue.use(Viewer,{name: 'viewer'});
  • 在需要的组件中添加如下代码

dom部分

<template>
 <!--图片查看插件-->
 <div class="images" v-viewer="{movable: false}" style="display: none">
   <img v-for="src in images" :src="src" :key="src">
 </div>
</template>

js部分

export default {
   data() {
      return {
        images:[],
   },
   mounted: function () {
     // 图片查看插件
     show () {
       // 找到.images的div挂载到$viewer上
       const viewer = this.$el.querySelector('.images').$viewer
       viewer.show()
     }
   }
 }
  • 在方法中调用

需要显示多少张图片,就往images数组中push多少张

viewLargerImage: function(event){
  const imgSrc = event.target.src;
  if(typeof imgSrc !=="undefined"){
    // 清空图片数组
    this.images = [];
    this.images.push(imgSrc);
    this.show();
  }
}

在线体验地址:chat-system | 示例代码地址:chat-system

更多使用方法,详见插件npm仓库:v-viewer

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于掘金,未经许可禁止转载💌
1

评论区