基于vue的图片查看工具

可以切换图片

功能:
1.上一页;
2.下一页;
3.放大(根据个人喜好调整幅度);
4.缩小(根据个人喜好调整幅度);
5.旋转(顺时针,逆时针同理所以不写了);
6.重置;

//**上代码;***//

<style>
    .screen {
        width: 50vw;
        height: 50vh;
        position: relative;
        overflow: hidden;
        background:linear-gradient(90deg,rgb(2, 43, 66),rgb(14, 21, 61));
    }

    .screen-item {
        width: 35vw;
        height: 35vh;
        top: 7.5vh;
        left: 7.5vw;
        position: absolute;
    }
    .tabbar {
        width: 240px;
        height: 35px;
        position: absolute;
        bottom: 1px;
        background-color: white;
        display: flex;
        justify-content: space-between;
        left: calc(25vw - 120px);
    }

</style>

<script>


    new Vue({
        el: "#viewer",
        data: {
            msg: "测试",
            value: 0,
            currentUrl:"",
            imgList:["./images/atz.jpg","./images/sbl.jpg"]
        },
        mounted() {
            // 初始化;
            this.currentUrl = this.imgList[0];
        },
        methods: {
            dragEvent(e) {
                // e.target.offsetLeft js获取到元素的left;
                // e.target.offsetTop js获取到元素的top;
                // 监听全局鼠标移动事件;
                let eOffsetLeft = e.target.offsetLeft;
                let eOffsetTop = e.target.offsetTop;
                document.onmousemove = (ev)=> {

                    let disX = eOffsetLeft + (ev.clientX - e.clientX);
                    let disY = eOffsetTop + (ev.clientY - e.clientY);
                    this.$refs.screenItem.style.left = `${disX}px`;
                    this.$refs.screenItem.style.top = `${disY}px`;
                    return false;
                }
                document.onmouseup = function() {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
                return false;
            },


            // 放大事件;
            ampEvent() {
                let currentWidth = this.$refs.screenItem.offsetWidth;
                let currentHeight = this.$refs.screenItem.offsetHeight;
                currentWidth += 40;
                currentHeight += 40;
                this.$refs.screenItem.style.width = currentWidth+"px";
                this.$refs.screenItem.style.height = currentHeight+"px";
            },
            // 缩小事件;
            shrink() {
                let currentWidth = this.$refs.screenItem.offsetWidth;
                let currentHeight = this.$refs.screenItem.offsetHeight;

                currentWidth -= 40;
                currentHeight -= 40;

                this.$refs.screenItem.style.width = currentWidth+"px";
                this.$refs.screenItem.style.height = currentHeight+"px";
            },
            //旋转事件;
            rotate() {
                if(!this.$refs.screenItem.style.transform) {
                    this.$refs.screenItem.style.transform = "rotate(90deg)";
                }else {
                    let reg = /\d{1,}/;
                    let currentValue = reg.exec(this.$refs.screenItem.style.transform)[0]*1;
                    currentValue += 90;
                    this.$refs.screenItem.style.transform = `rotate(${currentValue}deg)`;

                }
            },
            // 还原事件;
            reset() {
                //默认值;
                let defaultWidth = "35vw";
                let defaultHeight = "35vh";
                let defaultLeft = "7.5vw";
                let defaultTop = "7.5vh";
                let defaultRotate = "rotate(0deg)";
                //赋值
                this.$refs.screenItem.style.width = defaultWidth;
                this.$refs.screenItem.style.height = defaultHeight;
                this.$refs.screenItem.style.left = defaultLeft;
                this.$refs.screenItem.style.top = defaultTop;
                this.$refs.screenItem.style.transform = defaultRotate;

            },
            // 上一页事件;
            prevEvent() {
                // 调用reset方法先重置图片状态;
                this.reset();
                let index = this.imgList.indexOf(this.currentUrl);
                if (index == 0) {
                    this.currentUrl = this.imgList[0];
                    alert("当前是第一张图片了");
                }
                else {
                    index--;
                    this.currentUrl = this.imgList[index];
                }

            },


            //下一页方法;
            nextEvent() {
                // 调用reset方法先重置图片状态;
                this.reset();
                let index = this.imgList.indexOf(this.currentUrl);
                if (index == this.imgList.length - 1) {
                    this.currentUrl = this.imgList[this.imgList.length - 1];
                    alert("当前是最后一张张图片了");
                }
                else {
                    index++;
                    this.currentUrl = this.imgList[index];
                }
            }
        },

    })
</script>