Vue 中使用Viewer.js與 修改展示Viewer.js中圖片title

npm下載

npm install viewerjs

引入

import { mapGetters } from 'vuex';
import Viewer from 'viewerjs';

使用
參考

https://www.dowebok.com/demo/192/index3.html

this.updateUserName = this.arrimg[this.carouselIndex].createUserName;
            this.updateTime = this.arrimg[this.carouselIndex].createTime;
            const _that = this;
            const zgviewer = new Viewer(document.getElementById('idviewers'), {
                hidden: function () {
                    zgviewer.destroy();
                },
                zIndex: 3000,
                toolbar: {
                    zoomIn: 1,
                    zoomOut: 1,
                    oneToOne: 1,
                    reset: 1,
                    prev: {
                        show: true,
                        size: 'small',
                        click: () => {
                            if (this.carouselIndex === 0) {
                                this.carouselIndex = this.arrimg.length - 1;
                            } else {
                                this.carouselIndex -= 1;
                            }
                            this.updateInfo();
                            zgviewer.prev(true);
                        }
                    },
                    play: 0,
                    next: {
                        show: true,
                        size: 'small',
                        click: () => {
                            if (this.carouselIndex === 0) {
                                this.carouselIndex = this.arrimg.length - 1;
                            } else {
                                this.carouselIndex -= 1;
                            }
                            this.updateInfo();
                            zgviewer.next(true);
                        }
                    },
                    rotateLeft: 1,
                    rotateRight: 1,
                    flipHorizontal: 1,
                    flipVertical: 1
                },
                // 自定義title
                title: function() {
                    const viewdiv = '上傳人: ' + _that.updateUserName + '上傳時間: ' + _that.updateTime;
                    return viewdiv;
                }
            });