diff --git a/src/components/Slider/index.jsx b/src/components/Slider/index.jsx
deleted file mode 100644
index be679fc..0000000
--- a/src/components/Slider/index.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import './slider.css';
-import { useState } from 'react';
-
-const Slider = (props) => {
- const [v, setV] = useState(100);
- const handleInput = (e) => {
- setV(e.target.value);
- props.handleSlide(e.target.value);
- };
- return (
-
- {}} />
-
- );
-};
-
-export default Slider;
diff --git a/src/components/Slider/slider.css b/src/hooks/slider.css
similarity index 100%
rename from src/components/Slider/slider.css
rename to src/hooks/slider.css
diff --git a/src/hooks/useSlider.js b/src/hooks/useSlider.js
index 9dba52f..7accf0b 100644
--- a/src/hooks/useSlider.js
+++ b/src/hooks/useSlider.js
@@ -1,5 +1,48 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import './slider.css';
-export function useSlider({}) {
- return {};
+export const Slider = ({ value, setValue }) => {
+ const handleInput = (e) => {
+ setValue(e.target.value);
+ };
+ return (
+
+
+
+ );
+};
+
+export default function useSlider(defaultSize) {
+ const [value, setValue] = useState(defaultSize || 100);
+
+ const v = (value / 100).toFixed(2);
+
+ const styles = {
+ transform: `scale(${v})`,
+ // transform: `scale(${v * 24 / 33}, ${v})`,
+ transformOrigin: 'top left',
+ };
+
+ useEffect(() => {
+ let fn = (e) => {
+ if (e.shiftKey && e.key === 'L') {
+ document.getElementById('slider').classList.toggle('show');
+ }
+ };
+ let fn2 = () => {
+ setTimeout(() => {
+ document.getElementById('slider').classList.remove('show');
+ }, 200);
+ };
+
+ document.addEventListener('keydown', fn);
+ document.getElementById('slider').addEventListener('mouseleave', fn2);
+
+ return () => {
+ document.removeEventListener('keydown', fn);
+ document.getElementById('slider').removeEventListener('mouseleave', fn2);
+ };
+ }, [value]);
+
+ return { styles, setValue, Slider };
}
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 3b36983..d339699 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -1,4 +1,3 @@
-import { useEffect, useState } from 'react';
import './global.less';
import './index.less';
import Head from '../components/公共组件/顶部公司名称';
@@ -6,45 +5,14 @@ import LeftBar from '../components/模块组件/总览/LeftSide';
import BottomBar from '../components/模块组件/总览/Bottom';
import RightBar from '../components/模块组件/总览/RightSide';
import CenterTopData from '../components/模块组件/总览/CenterTop';
-import Slider from '../components/Slider';
import { SocketContextProvider } from '../store/socket-data-provider';
+import useSlider from '../hooks/useSlider';
import V3DBG from '../assets/V3DBG.png';
// import V3D from './V3D';
export default function index() {
- const [value, setValue] = useState(100);
-
- const v = (value / 100).toFixed(2);
- const styles = {
- transform: `scale(${v})`,
- // transform: `scale(${v * 24 / 33}, ${v})`,
- transformOrigin: 'top left',
- };
-
- useEffect(() => {
- let fn = (e) => {
- console.log('add fn');
- if (e.shiftKey && e.key === 'L') {
- document.getElementById('slider').classList.toggle('show');
- }
- };
- let fn2 = () => {
- console.log('add fn2');
- setTimeout(() => {
- document.getElementById('slider').classList.remove('show');
- }, 200);
- };
-
- document.addEventListener('keydown', fn);
- document.getElementById('slider').addEventListener('mouseleave', fn2);
-
- return () => {
- console.log('remove fn, fn2');
- document.removeEventListener('keydown', fn);
- document.getElementById('slider').removeEventListener('mouseleave', fn2);
- };
- }, [value]);
+ const { styles, setValue, Slider } = useSlider(75);
return (
//
@@ -66,7 +34,7 @@ export default function index() {
-
+
//
);