使用 viewerjs 简单实现单图预览

最新推荐文章于 2024-08-08 08:24:33 发布

TangAcrab

最新推荐文章于 2024-08-08 08:24:33 发布

阅读量572

点赞数

分类专栏： vue 文章标签： viewerjs vue图片预览

本文链接：https://blog.csdn.net/weixin_39786582/article/details/128576728

版权

vue 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

该代码段展示了一个Vue组件，用于在页面上展示图片并利用ViewerJS库提供缩放、旋转等查看功能。组件监听fileUrl属性，当图片URL改变时更新图片。ViewerJS配置包括工具栏选项和图片显示设置。

摘要由CSDN通过智能技术生成

效果：
在这里插入图片描述

<template>
  <img ref="imgRef" :src="fileUrl" class="custom-img" />
</template>
<script>
import Viewer from 'viewerjs'
import 'viewerjs/dist/viewer.css'

export default {
  name: 'imgView',
  mixins: [],
  components: {},
  // 数据部分
  props: {
    fileUrl: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      viewer: null
    }
  },
  computed: {},
  watch: {
    fileUrl: {
      handler (val) {
        if (val) {
          this.$nextTick(() => {
            this.showImg()
          })
        }
      },
      immediate: true
    }
  },
  // 生命周期
  created () {},
  beforeDestroy () {
    if (this.viewer) {
      this.viewer?.destroy?.()
      this.viewer = null
    }
  },
  mounted () {},
  unmounted () {},
  // 方法
  methods: {
    showImg () {
      const that = this
      if (this.viewer) {
        this.$nextTick(() => {
          this.viewer?.update()
        })
      } else {
        that.$nextTick(function () {
          const ViewerDom = this.$refs.imgRef
          this.viewer = new Viewer(ViewerDom, {
            // 相关配置项,详情见下面
            toolbar: {
              zoomIn: 1,
              zoomOut: 1,
              oneToOne: 1,
              reset: 1,
              rotateLeft: 1,
              rotateRight: 1
            }, // 显示工具条
            inline: true,
            navbar: false,
            viewed () {
              // 图片显示比例 100%
              // this.viewer.zoomTo(0.4)
            }
          })
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.custom-img {
  max-width: 1640px;
  width: 1640px;
  object-fit: contain;
  height: 100%;
  display: none;
}
</style>