@geeboo/img-view

预览器

vue 版本图片预览器，会根据文件后缀来生成预览效果，支持图片放大、旋转、拖拽、打印、下载等，现已兼容vue2、vue3 采用vue-demi兼容方案，安装时请安装vue-demi 即可实现不同框架下使用。

组件下载

npm i @geeboo/img-view vue-demi  -S

安装

import viewer from "@geeboo/img-view"
import "@geeboo/img-view/lib/index.css"
Vue.use(viewer)

也可以单独组件引入

<template>
  <img-viewer ref="refImg" :value="url" mode="btn"></img-viewer>
</template>

import imgViewer from "@geeboo/img-view"
import "@geeboo/img-view/lib/index.css"

export default {
  name: 'App',
  components: { imgViewer },
  }

迭代

v2.0.4

• 优化 查看图片的弹窗边距
• 优化 在放大缩小时使用过渡效果

v2.0.3

• 删除 $message的处理，vue2时提示使用者需手动挂载

v2.0.2

• 优化 简化逻辑,去除id相关内容
• 修复 兼容手机端拖动
• 优化 修改层级css

v2.0.1

• 引入 vue-demi 改造为render支持vue2、vu3

v1.0.0

• 初始化项目

全局注册

全局组成后可以，直接使用this.$viewer(urls)直接打开资源,并且 urls 支持数组或逗号分隔，但这个为多图时支持多个内容阅读 :::preview 说明 ||

demo-preview=./img-view/demo.vue

:::

组件引入

我们也可以使用img-viewer来创建一个组件.注意mode默认为none是默认不显示的,我们可以设置为mode:img,来达到预览的小图。

:::preview 说明 || mode: "img"、"btn"

demo-preview=./img-view/demo1.vue

:::

参数

属性名	类型	说明
mode	String	显示状态none:不显示，btn:按钮，img:图
value	Auto	显示的内容object:作为资源对象，Array:多个资源对象，String：资源地址（支持用‘,’分割多个）
btnLabel	String、Function	mode:btn时使用修改显示内容，默认：“查看文件”,同时支持直接
props	Object	配置字段
extend	Object	站位节点属性配置