摘要：
需要注意的是，这仅适用于Electron的包装要求。一般来说，不会有这样的要求，因为浏览器有这样的功能！！！滚动框。TsximportReact，｛useEffect，useRef，useState｝from'act'导入｛Button｝from‘td'etsize=1//默认大小lettimer=null//计时器关闭导出默认值=˃{const[isZoom，setIsZoom]=useState//是否显示控制器const[isOver，setIsOver]=useState//是否显示控件const[per，setPer]=use状态//控制器百分比useEffect//放大函数zoomOut（）｛size=size˃=3？
前言：功能是不难的，看过代码之后，肯定能理解，肯定。重点说明，这仅仅是为了electron打包做的需求，一般是不会有这样的需求，因为浏览器都带有这样的功能！！！说三遍！！说三遍！！说三遍！！
ScrollBox.tsx
import React, { useEffect, useRef, useState } from 'react'
import { Button } from 'antd'
let size = 1 // 默认大小
let timer = null // 定时器关闭
export default ({ claName }) => {
const [isZoom, setIsZoom] = useState(false) // 是否显示控制器
const [isOver, setIsOver] = useState(false) // 是否显示控制器
const [per, setPer] = useState(100) // 控制器百分数
useEffect(() => {
start() // 绑定键盘滚轮事件
}, [])
// 放大
function zoomOut() {
size = size >= 3 ? size: size + 0.05;
const num = +Math.floor(size * 100).toFixed(0)
setPer(num)
set();
}
// 缩小
function zooMin() {
size = size <= 0.6 ? size : size - 0.05;
const num = +Math.floor(size * 100).toFixed(0)
setPer(num)
set();
}
// 放大缩小修改样式
function set() {
setIsZoom(true)
const divElement = document.querySelector(`.${claName}`)
// @ts-ignore
divElement.style.zoom = size+'';
// @ts-ignore
divElement.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
// document.body.style.zoom = size+'';
// document.body.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
}
// 重置
function reset() {
size = 1
setPer(100)
const divElement = document.querySelector(`.${claName}`)
// @ts-ignore
divElement.style.zoom = size+'';
// @ts-ignore
divElement.style.cssText += '; -moz-transform: scale(' + size + ');-moz-transform-origin: 0 0; ';
}
// 启动
function start() {
const userAgent = navigator.userAgent
if (userAgent.includes('NativeClient')) {
document.onkeydown = e => {
const key = e.key // Control
window.onmousewheel = (e: any) => {
const wheelDelta = e.wheelDelta
if (key === 'Control' && wheelDelta > 0) {
zoomOut()
} else if (key === 'Control' && wheelDelta < 0) {
zooMin()
}
}
}
document.onkeyup = e => {
const key = e.key // Control
if (key === 'Control') {
window.onmousewheel = null
// @ts-ignore
timer = setTimeout(() => {
setIsZoom(false)
timer = null
}, 1500)
}
}
}
}
// 鼠标放在控制器不消失
const mouseOver = () => {
setIsOver(true)
}
// 鼠标离开控制器消失
const mouseOut = () => {
setIsOver(false)
setIsZoom(false)
}
const scrollBoxStyle: any = {
position: 'absolute',
top: '20px',
right: '30px',
padding: '5px 12px',
boxShadow: '0 1px 1px #999',
cursor: 'default',
userSelect: 'none',
}
return (
<div>
{
isZoom || isOver ? <div style={scrollBoxStyle} onMouseEnter={mouseOver} onMouseLeave={mouseOut}>
<span style={{ marginRight: '50px' }}>{per}%</span>
<span style={{ padding: '5px 12px',fontSize: '20px' }} onClick={zooMin}>-</span>
<span style={{ padding: '5px 12px',fontSize: '20px' }} onClick={zoomOut}>+</span>
<Button onClick={reset}>重置</Button>
</div> : ''
}
</div>
)
}
使用方式：
在最外层的tsx文件中引入，比如说你的内容都包含在一个父div下，就把上面那个组件引入最大的.tsx文件下面，与包含所有的那个父div并列，如下：
import React from 'react'
import ScrollBox from '@/components/ScrollBox'
import Login from '@/pages/login/index'
export default () => {
const click = () => {
}
return (
<div>
<div>
<ScrollBox claName={'ssss'}></ScrollBox> // 滚动组件
<Login className={'ssss'}></Login> // 我的所有内容都在这个组件下面，className要保持一致，因为是根据className找到对应的标签进行操作，至于为什么不对bady操作，因为操作body会导致控制器也跟着变大变小，与谷歌自带的功能相违背
</div>
</div>
)
}