预览器
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 | 站位节点属性配置 |