images-viewer-vue3
v1.0.19
Published
A lightweight image viewer for Vue3
Downloads
1,285
Maintainers
Readme
images-viewer-vue3
A lightweight image viewer for Vue3, it is based on flip animation
technology, Support PC and h5 mobile web page preview photos, if it is a product developed by vue3.
images-viewer-vue3 demo(https://github.com/qiunanya/vue3-major-editor/tree/main/packages/image-viewer)
Features
- Component preview image
- Command preview image
- API preview image
Function
- Rotate image
- Zoom image
- Flip image
- Drag image
- Download image
- AutoPlay image
Install
npm install images-viewer-vue3
--or
pnpm add images-viewer-vue3
--or
yarn add images-viewer-vue3
Usage
Component preview image
The component wraps the image element, click directly to preview.
// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import ImagesViewerVue3 from 'images-viewer-vue3';
const app = createApp(App)
// Image preview directive will be automatically injected here.
// Includes preview directive and lazy loading directive
app.use(ImagesViewerVue3, {
zIndex: 999, // Default 999
language: 'zh', // Default language 'zh'
scaleRatio: 1, // Default 1
rotateRatio: 90, // Default 90 degrees
isEnableDrag: true, // Enabled by default
isEnableWheel: true, // Enabled by default
playSpeed: 2000, // playSpeed Default 2000 ms
isDownLoad: true, // Enabled by default
})
app.mount("#app")
// demo.vue
<ImagesViewerVue3>
<img src="https://picsum.photos/id/6/5000/3333"/>
<img src="https://picsum.photos/id/10/2500/1667"/>
<img src="https://picsum.photos/id/11/2500/1667"/>
</ImagesViewerVue3>
Options
Initialize the configuration in app.use(ImagesViewerVue3,options)
of the main.ts
file.
| Option | Allowed Value | Default | Description | | ------------- |-------------| -----| -------- | | scaleRatio | number in percentage | 1 | It defines the initial zoom value of the image. | | zIndex | number in percentage | 999 | Initial value of the previewer stacking order property. | | rotateRatio | number in percentage | 90 | It defines the initial value of the image rotation angle. | | isEnableDrag | boolean | true | Defines whether to enable the drag and drop function. | | isEnableWheel | boolean | true | Defines whether to enable mouse scrolling to zoom the image. | | language | 'zh' or 'en' | 'zh' | Define the prompt text display language.| | playSpeed | number | 2000 | play speed, Default 2000 ms.| | isDownLoad | boolean | true | Download enabled by default |
Command preview image
Add v-image-viewer to the image tag that needs to be previewed. All imgs with added instructions will be automatically added to the preview list.
<img v-image-viewer src="https://picsum.photos/id/19/2500/1667"/>
<img v-image-viewer src="https://picsum.photos/id/63/2500/1667"/>
Support lazy loading instructions
<img v-for="(item, index) in dataList" :key="index" :src="item" v-image-viewer/>
<img src="https://picsum.photos/id/10/2500/1667" v-image-viewer/>
<img v-image-viewer v-lazy-image="'https://picsum.photos/id/11/2500/1667'"/>
<img v-image-viewer v-lazy-image="currentSrc"/>
<script setup lang="ts">
import { ref } from 'vue'
const currentSrc = ref('https://picsum.photos/id/13/367/267')
</script>
API preview image
<img @click="previewImage" src="https://picsum.photos/id/19/2500/1667"/>
<script setup lang="ts">
import { imageViewerApi, onUpdate } from 'images-viewer-vue3'
// Monitor current picture information
onUpdate((image:string, index: number) => {
console.log(image, index)
})
const previewImage = (evt) => {
if (!evt.target) return
const iDom = evt.target as HTMLImageElement
imageViewerApi({
current: iDom.src,
// Enable flip animation
imageDom: iDom,
// Preview more pictures
// images: ['src', ...],
})
}
</script>
Keyboard-shortcuts-windows
The images-viewer-vue3
has built-in commonly used shortcut keys.
| Shortcut Key | Function Description | | ------------- |-------------| | Right(→) | Next | | Left(←) | Previous | | Ctrl+I+Y | Flip Vertically | | Ctrl+I+X | Flip Horizontal | | Ctrl+C+R | Rotate 90 degrees clockwise | | Ctrl+C+L | Rotate 90 degrees counterclockwise | | Ctrl+Z | Restore initial value | | Ctrl+'+' | Zoom | | Ctrl+'-' | Zoom out | | Space | AutoPlay and StopPlay | | ESC | Close Preview |