image-ipreview-box
Version:
A image preview plugin for Vue.js.
52 lines (43 loc) • 1.61 kB
Markdown
# image-ipreview
一款基于vue的桌面端轻量图片预览插件。
1.欢迎大家使用~，觉得还行的，恳请给个star，谢谢！
2.如有问题，请提issue，我会持续迭代。
### 特性
1.支持缩放，旋转，原图查看等
2.支持鼠标滚轮缩放
3.自带节流机制，兼顾性能
4.支持鼠标拖动预览图查看
### 安装
```javascript
npm install image-ipreview
```
### 用法
```javascript
import ImageIpreview from 'image-ipreview';
import 'image-ipreview/lib/image-ipreview.css';
Vue.use(ImageIpreview);
// 组件中使用实例
...
<template>
<div id="app">
<image-ipreview
:url="require('./assets/demo.png')"
:isMouseWheel="true"
:isShowToolBar="true"
:closeOnPressEscape="true"
/>
</div>
</template>
...
```
### 配置
| 属性名 | 类型 | 描述 | 是否必填 | 默认值 |
| :----------------: | :-----: | :-----------: | :----: | ------ |
| url | string | 图片地址 | 是 | |
| closeOnPressEscape | boolean | esc键关闭预览 | - | true |
| isShowToolBar | boolean | 是否展示工具栏 | - | true |
| isMouseWheel | boolean | 是否开启鼠标滚轮缩放 | - | false |
### 效果
