@geeboo/img-view

预览器

vue 版本图片预览器，会根据文件后缀来生成预览效果，支持图片放大、旋转、拖拽、打印、下载等

组件下载

npm i @geeboo/img-view -D

安装

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

用例

全局注册

全局组成后可以，直接使用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时使用修改显示内容，默认：“查看文件”,同时支持直接
http	Object	请求配置，必须配置$fetch
http.filePath	String	文件请求地址
props	Object	配置字段
extend	Object	站位节点属性配置
downloadFN	Function	自定义资源下载逻辑（url,fileName）

迭代

1.0.0

• 初始化项目