滑条组件使用
-------源代码在 GitHub 上。
一、依赖
2、若要在组件中执行 less 文件,则在1的基础上下载相关依赖 npm install -g less
。
执行less文件:首先进入less文件所在目录,然后在控制台输入命令:
lessc styles.less styles.css
二、组件使用
1、下载组件到项目相应目录。
2、在使用组件的文件中引入组件:
import Slider from "./Components/React_Slider";
3、使用:
<Slider/>
三、组件修改
1、使用react的 HOOK 定义组件,用useEffect()
对轮播图options
进行初始化,以及检测数据变化。
2、使用者可以根据自身需求对组件样式进行修改。
四、效果
1、初始状态。
2、鼠标移动到滑块,鼠标变为手掌型,并显示滑条长度占比。
3、拉动滑块,滑条变化。
4、移开鼠标,将不显示滑条长度占比。