Share a picture viewer suitable for background management systems, websites, etc.

Demo online link: duo-image-viewer

Supports the following functions:

Zoom:

2. Rotate

3. Drag and drop

4. The full screen

Technology stack: VUE

How to use:

1. Install dependencies

npm i duo-image-viewer --save  // cnpm i duo-image-viewer --save
Copy the code

2. Import and register components

Find the main.js file in the vue project and add the following code:

Import duoImageViewer from 'duo-image-viewer' // Import the component vue. use(duoImageViewer) // Register the componentCopy the code

3. Use it on the page

</button> <duo-image-viewer: SRC =" SRC ":srcList="srcList" @close="handleClose" :showViewer="showViewer" /> </div> </template> <script> export default { data() { return { src: { name: '', url: "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg" }, srcList: [ "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg", "https://baidu.com/pictures/2020-09-08/1599535221238-tQfrTrrwOLSdhtiVBY.jpg", ], showViewer: false, }; }, methods: { handleOpen() { this.showViewer = ! this.showViewer }, handleClose() { this.showViewer = false } } }; </script>Copy the code

Where showViewer controls display hide, SRC represents the current image, and srcList represents the list of images to be displayed

GitHub address: duofuni/duo-image-viewer