# vue3-preview

**Repository Path**: ydydydq/vue3-preview

## Basic Information

- **Project Name**: vue3-preview
- **Description**: 一个Vue3+TS的图片预览Vue组件，方便使用，拆箱即用，支持图片放大缩小、移动，键盘按键便捷操作等等。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://blog.ydydydq.top/webs/wallpaper/index.html
- **GVP Project**: No

## Statistics

- **Stars**: 12
- **Forks**: 2
- **Created**: 2021-08-12
- **Last Updated**: 2024-08-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, vue3, vue3-preview, img

## README

# vue3-preview

### 介绍
Vue3+TS的图片预览Vue组件，支持图片放大缩小、移动、快捷键操作等等。

### 下载
```
npm install vue3-preview -S
```

### 在线体验
[橙某人 - 在线壁纸](http://59.110.157.15/webs/wallpaper/index.html)

### 使用说明
```
<template>
  <div>
    <div class="images">
      <img @click="imgHandle(url)" v-for="url in imagesData" :key="url" :src="url">
    </div>
    <button @click="clickHandle">点击预览图片</button>
    <preview :urlList="imagesData" v-model="visible"></preview>
    <preview ref="preview"></preview>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import Preview from 'vue3-preview';
export default defineComponent({
  name: 'App',
  components: {
    Preview
  },
  setup() {
    const preview = ref();
    const imagesData = ref([
      'http://p8.qhimg.com/bdm/1024_768_85/t01d0a11d2e93f10849.jpg',
      'http://p0.qhimg.com/bdm/1024_768_85/t0185100fadc5a11456.jpg',
      'https://blog-pro-vite.oss-cn-shanghai.aliyuncs.com/uploads/one/713591c5-153e-4675-ad82-961a1bec4692.png',
    ]);
    // 方式一
    const visible = ref(false)
    function clickHandle() {
      visible.value = true;
    }
    // 方式二
    function imgHandle(url: string) {
      preview.value?.open(url);
    }
    return {
      preview,
      imagesData,
      visible,
      clickHandle,
      imgHandle
    };
  }
})
</script>

<style scoped>
.images{
  display: flex;
}
.images img {
  width: 300px;
  height: fit-content;
  margin: 10px;
  cursor: pointer;
}
</style>
```

### 参数说明
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| model-value / v-model | 是否显示组件 | boolean | false | 
| urlList | 用于预览的图片链接列表，open方法的imgUrls参数会优先 | string[] | [] | 
| zIndex | 预览时遮罩层的 z-index | number | 2000 | 
| hideOnClickModal | 是否可以通过点击遮罩层关闭预览 | boolean | false | 
| initialIndex | 预览的首张图片的位置, 小于等于数组长度 | Number | 0 | 
| infinite | 是否可以无限循环预览 | boolean | true | 
| appendToBody | 是否将组件插入至 body 元素上 | boolean | false | 

### 方法说明
| 事件名称 | 说明 | 回调参数 | 
| --- | --- | --- | 
| close | 关闭组件触发 | 无 | 
| switch | 当图片切换时触发 | (val: number)，切换目标的下标 | 

### 具有功能
- 上一张
- 下一张
- 放大
- 缩小
- 图片模式：fullscreen / original
- 左旋转
- 右旋转
- 快捷键
    - 鼠标拖动
    - 鼠标滚轴放大缩小
    - esc键关闭
    - left键上一张
    - right键下一张
    - up键放大
    - down键缩小
    - down键缩小
    - space键切换图片模式