## BioImgviewer 百奥知图片预览组件
预览图片可根据需求进行翻转放大缩小查看。

### 基本用法

:::demo 绑定`urlList`到一个`arry`类型的变量。可以使用`use-thumbnail`属性来设置下方缩略图展示。

```html
<div class="el-image-viewer">
  <bio-imgviewer
          class="img-preview"
          arrow-position="action"
          use-thumbnail
          :show-close="false"
          :url-list="previewList">
  </bio-imgviewer>
</div>
<script>
  export default {
    data() {
      return {
        previewList:[
          "http://dev.bioknow.net:18003/bio-document/static/401.fbdc00a.png",
          "http://dev.bioknow.net:18003/bio-document/static/404.f59a6ae.png",
        ]
      }
    }
  };
</script>
```
:::

### Attributes
form对象内参数。

| 参数      | 说明    | 类型      | 可选值       | 默认值   |
|---------- |-------- |---------- |-------------  |-------- |
| urlList | 图片地址集合  | array | — | — |
| zIndex | 组件 z-index属性 | number | — | 2000 |
| onSwitch | 切换图片时进行的函数方法 | function | — | () => { } |
| onClose | 关闭图片时进行的函数方法 | function | — | () => { } |
| initialIndex | 默认展示图片的下标 | number | — | 0 |
| arrowPosition | 左右按钮（pre, next 翻页按钮）显示的位置 | string | action/side | side |
| mouseScale | 是否支持鼠标滚轮控制缩放 | boolean | — | false |
| showClose | 是否显示关闭按钮 | boolean | — | true |
| useThumbnail | 是否使用缩略图 | boolean | — | false |

### Events
| 事件名称      | 说明    | 回调参数      |
|---------- |-------- |---------- |
| switchImg | 切换图片时触发 | 切换图片在对应数组中的下标 |
