实现功能---如何在vue项目中对页面元素进行放大缩小操作？

前面解决了ios中点击input输入框光标变大，页面放大问题，但是后面发现有个页面内容需要放大和缩小！！!

是时候展示新的“技术”了。

一、明确需要完成的功能

文字内容可以放大、缩小

二、解决方法

功能及数据

data() {
    return: {
 // 定义缩放Icon集合常量
            ZoomIcons: [
                { key: 'zoomOut', label: '缩小', value: '缩小' },
                { key: 'zoomIn', label: '放大', value: '放大' },
                { key: 'zoomReload', label: '还原', value: '还原' }
            ],
            zoomScale: 0.9, // 默认的scale设为0.9
            zoomIcon: '', // 点击的图标

   }
}



methods: {
        // 操作页面放大缩小
        handleZoom(key) {
            this.zoomIcon = key;
            if (key === 'zoomOut' && this.zoomScale <= 0.1) {
                this.zoomScale = 0.1;
                return;
            }
            if (key === 'zoomOut' && this.zoomScale > 0.1) {
                console.log('suoxiao1');

                this.zoomScale = (this.zoomScale - 0.1);
                return;
            }
            if (key === 'zoomIn') {
                console.log('fangda');

                this.zoomScale = this.zoomScale + 0.1;
                return;
            }
            this.zoomScale = 0.9

        },
        // 点击显示
        pdfToTop() {
            this.$refs.zoomBox.style.display = 'block';
        }
}

样式类

// 需要放大缩小内容的位置
.bit-right-container {
    /* display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: top; */

    position: absolute;
    width: 100%;
    padding: 10px;
}
// 三个小图标的位置
.bit-wrap-options {
    position: fixed;
    top: 50px;
    right: 16px;
}

.bit-wrap-options .bit-zoom-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    margin-top: 16px;
    background: #409EFF;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    color: #313C42;
}

.bit-wrap-options .bit-zoom-box:hover {
    background: linear-gradient(180deg, #f78989 0%, #f78989 100%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}

.bit-wrap-options .active {
    background: linear-gradient(180deg, #f78989 0%, #f78989 100%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.16);
}