前面解决了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);
}