前面解决了ios中点击input输入框光标变大，页面放大问题，但是后面发现有个页面内容需要放大和缩小！！!
是时候展示新的“技术”了。
一、明确需要完成的功能
文字内容可以放大、缩小
二、解决方法
功能及数据
data() {return: {// 定义缩放Icon集合常量ZoomIcons: [{ key: 'zoomOut', label: '缩小', value: '缩小' },{ key: 'zoomIn', label: '放大', value: '放大' },{ key: 'zoomReload', label: '还原', value: '还原' }],zoomScale: 0.9, // 默认的scale设为0.9zoomIcon: '', // 点击的图标}}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);}
