手写重构UI框架
神奇大叔
这个作者很懒,什么都没留下…
展开
-
组件 按需引入原理
import { Button } from 'element-ui'以Element UI为例,为实现按需引入,需要借助 babel-plugin-component 这个 webpack 插件,并且配置 .babelrc{ "presets": [["es2015", { "modules": false }]], "plugins": [ [ "component", { "libraryName": "element-ui",原创 2022-05-27 10:51:00 · 811 阅读 · 0 评论 -
重构-抽屉(左右抽屉)
动画: 抽屉出现背景渐变 抽屉出现消失移动动画 实现: display从none到block产生过渡动画:使用animation 监听animation结束动画:onAnimationEnd 参数: App.propTypes = { show: PropTypes.bool, 是否显示抽屉,true显示 right: PropTypes.bool, 是否为右侧出现抽屉,默认为左侧 hide: PropTypes.func.isRequired, 必须设置,抽屉原创 2021-01-03 22:59:19 · 499 阅读 · 0 评论 -
重构-下拉菜单
动画: 点击标题伸缩 点击菜单项伸缩 实现: 子元素未知高度过渡:通过js获取子元素高度后,再将其隐藏,后续就可通过获取的高度进行动画过渡参数: App.propTypes = { click: PropTypes.func, 点击菜单项回调,第一个参数是索引,第二个参数是菜单项内容 title:PropTypes.string, 下拉框的标题 tipTriangleWidth:PropTypes.string, 下拉框的三角提示大小 tipTria原创 2021-01-03 15:24:10 · 156 阅读 · 0 评论 -
重构-标题栏(超过一定距离居中、可手势切换)
待补充:获取到中心点,判断在中心点周围,移动过程记录移动总距离,判断距离父元素坐标距离-移动总距离,获得对应左边视口的距离,再与中心距离比较,获得需要调整的距离左边界不移动:记录的移动距离>0,则移动距离=0,点击前面几个不移动右边界不移动:记录的移动距离>标题栏的总长度-标题栏显示容器的长度,则移动距离=-(标题栏的总长度-标题栏显示容器的长度),点击后面几个不移动import React, { useState,useCallback,useRef,useEffect,useMemo原创 2020-12-25 23:09:18 · 189 阅读 · 1 评论 -
重构-对话框
动画: 出现下滑、消失上滑渐变 实现: 通过ReactDOM.render实现组件的挂载和数据的隔离,ReactDOM.unmountComponentAtNode和removeChild来清除节点 通过Promise来实现对话状态的回调,即将Promise的reject和resolve传进组件,在组件内部调用 使用: 方式一: Dialog.show({ title: '这是标题', message: '这是段落', .原创 2020-12-23 21:03:52 · 144 阅读 · 0 评论 -
重构-消息提示框
待完成:框的高度自定义import React, { useState } from 'react'import PropTypes from 'prop-types'import './message.css' let seed = 0; //当前个数 let instances = []; //当前节点数组 // 未完成:多次点击,高度累增加,然后依次消去,消去会向上移动 function App(props) { } App.showOnce =原创 2020-12-17 21:17:12 · 198 阅读 · 0 评论 -
重构-加载区域
动画: 圆环旋转、圆环虚线运动实现: 圆环使用svg来设置,通过设置圆的实现和虚线距离来产生圆环运动效果 使用插槽特性,来指定需要加载的区域参数: loading: PropTypes.bool, 是否将区域加载 background:PropTypes.string, 加载背景色,传入具有透明度的rgba颜色 fontSize: PropTypes.string, 加载背景中的字体大小 strokeColor: PropTypes.string,原创 2020-12-16 14:58:26 · 119 阅读 · 0 评论 -
重构-圆角消息提示(右上角)
动画: 消息出现/消失渐变参数: value:PropTypes.oneOfType([PropTypes.string,PropTypes.number]), 要显示的内容 hidden:PropTypes.bool, 是否隐藏,默认为false dot:PropTypes.bool, 消息是否为一个圆点,此时不设置value height:PropTypes.string, 圆角高度 fontSize: PropTypes.string, 消息文字大小原创 2020-12-14 16:51:27 · 188 阅读 · 0 评论 -
重构-分页器
动画: 无实现: startX变量来记录要渲染的中间按钮的起始页数 pageNum变量来表示要渲染的中间按钮的个数 currtX变量来记录当前的页数 (1)首尾固定数值 (2)根据传递的中间按钮要显示的个数 如果要显示的个数+首尾固定的2个数<=总页数,则不会出现省略号, (3)渲染中间按钮个数 1、要渲染的个数(根据数组长度进行,故数组内容可以为任意值) 如果pageNum+首尾2个数字>=总页数,则要渲染的个数为总页数-2 否则,即为要渲染原创 2020-12-12 17:18:11 · 152 阅读 · 0 评论 -
重构-树形结构(左侧多级菜单)
实现多级展示: 递归组件实现点击显示/隐藏子菜单: 利用js对象特性,无属性也可以添加,即每个属性添加个flag,用来控制是否显示当前标签的子标签 即点击当前标签,给渲染数据的对象添加flag,决定子标签是否显示传递参数结构:[{label:'标签名',children:[{label:'子标名'}]}]缺陷: 高度未知,使用max-height做过渡,会有延迟效果图:代码示例:使用:import React,{useState} from 'react'import原创 2020-12-10 17:11:40 · 1029 阅读 · 0 评论 -
重构-环形进度条
动画: 颜色变化、宽度增加圆环实现: svg中两个圆,背景色都为none,通过设置边框为虚线,其中一个做背景,虚线的实线长度来实现圆环,实线还要设置stroke-linecap: round;形成圆角参数: percentage: PropTypes.number, 数值,0-100 onSuccess: PropTypes.func, 当100%时触发,参数为状态 size: PropTypes.string, 圆环大小,直径(算边框) strokeWidth:原创 2020-12-07 23:54:36 · 229 阅读 · 0 评论 -
重构-线性进度条
动画: 传递颜色数组后,颜色过渡 宽度改变有0.6s过渡参数: percentage: PropTypes.number, 进度数值,0-100 onSuccess: PropTypes.func, 当加载到100%时,触发回调,第一个参数是状态 colors: PropTypes.array, 颜色数组,会根据传递的颜色,在不同进度现实不同颜色,默认为蓝色 suffix: PropTypes.bool, 后置图标,在整个轨道后出现,未实现逻辑,仅是展现,需自定义设置原创 2020-12-07 17:52:29 · 268 阅读 · 0 评论 -
重构-标签(多元)
动画: 删除图标的移入移出颜色渐变 添加标签后,添加的标签伸缩变化(实际是旋转实现) 设置索引来指向添加的标签,为其添加一个类,类使用帧动画(才能一开始就加载动画) 添加标签的实现: 动态切换添加按钮和输入框 输入内容后,光标消失时,将不为空的内容放进数组,重新渲染 参数: tags: PropTypes.array, 标签数组,格式为[{name:'标签名',type{color:'背景色',borderColor:'边框色',fontColor:'字体颜色'}}] d原创 2020-12-06 21:34:19 · 222 阅读 · 0 评论 -
重构-表格
参数: delete: PropTypes.bool, 是否增加删除 data: PropTypes.array, 数组数据 onDelete: PropTypes.func, 删除回调,第一个参数是删除后的所有内容 tableHeight: PropTypes.string, 表格高度 titleHeight: PropTypes.string, 标题行高度 titleFontSize: PropTypes.string, 标题字体大小 borderColor: P原创 2020-12-05 13:44:34 · 396 阅读 · 1 评论 -
重构-五星评分
动画: 移入到某个星星位置,之前的星星高亮,后面的星星暗色实现: 动画: (1)通过一个索引,索引值为-1,每当移入到星星时,索引变成当前索引,当星星自身的索引小于等于改索引时,添加样式高亮, (2)移出所有星星时,重新将索引设置为-1,使得星星保持初始样式,同时为了在移动过程覆盖初始样式,移出所有星星时还原初始样式,还要在显示初始样式时,添加索引值是否为-1的判断条件 根据评分的小数,显示星星的高亮面积: (1)在暗色星星的基础上,再定位一个大小相同的高亮星星,高亮星星的容器宽度为小数原创 2020-12-02 16:26:08 · 179 阅读 · 0 评论 -
重构-传送文件
动画: 移入移出边框变色参数: onLoad: PropTypes.func, 回调参数,第一个参数是上传的所有文件,每个文件包含转换后base64码的url、文件名称、文件大小、文件类型 limit: PropTypes.number, 限制上传的文件个数,默认为9 accept:PropTypes.string, 文件上传类型,遵循input的accept规则 width:PropTypes.string, 宽度 height:PropTypes原创 2020-11-30 21:02:18 · 181 阅读 · 0 评论 -
重构-滑块(拉动条)useReducer版本
实现: hooks实现动画: 提示框渐变显示参数: disabled: PropTypes.bool, 禁用 onChange: PropTypes.func, 拉动回调,第一个参数是进度数值,防抖默认200毫秒 value: PropTypes.number, 初始进度值,0-10 sliderHeight:PropTypes.string, 滑块高度 sliderWdith: PropTypes.string, 滑块宽度 sliderColor: PropTypes.str原创 2020-11-30 13:46:15 · 175 阅读 · 0 评论 -
重构-滑块(拉动条)
实现: hooks实现动画: 提示框渐变显示参数: disabled: PropTypes.bool, 禁用 onChange: PropTypes.func, 拉动回调,第一个参数是进度数值,防抖默认200毫秒 value: PropTypes.number, 初始进度值,0-10 sliderHeight:PropTypes.string, 滑块高度 sliderWdith: PropTypes.string, 滑块宽度 sliderColor: PropTypes.str原创 2020-11-27 17:38:09 · 256 阅读 · 0 评论 -
重构-下拉框
动画: 选择按钮旋转 下拉框伸缩 边框、图标hover变色参数: placeholder:PropTypes.string, 预展示内容,不写则默认展示传入的list数组第一条内容 selectWidth:PropTypes.string, 展示框的宽度 fontSize:PropTypes.string, 展示框内的字体大小 selectHeight:PropTypes.string, 展示框的高度 borderColor:PropTypes.stri原创 2020-11-25 16:51:53 · 283 阅读 · 0 评论 -
重构-开关Switch
当给根类设置transition:ns时,当根类的属性变化都会产生过渡态,即当再添加一个类,这个类出现/消失会出现两种过渡态参数: static propTypes={ trackWidth:PropTypes.string, 开关轨道宽度 trackHeight:PropTypes.string, 开关轨道高度 circleWidth:PropTypes.string, 圆圈宽度 gap:PropTypes.strin原创 2020-11-24 23:19:28 · 267 阅读 · 1 评论 -
重构-输入框(九种可自定义类型)
动画效果: 提示框的伸缩效果 边框、图标hover变色效果 聚焦边框变色效果 禁用鼠标样式变成禁止效果设置提示框内容: 在传入的onChange回调中,来进行动态设置提示框内容的操作,第一个参数为当前输入框内容 因为回调已经做了500毫秒的防抖操作,故可直接设置tips的值即可 参数: width:PropTypes.string, 宽度 height:PropTypes.string, 高度 borderColor:PropTypes.string原创 2020-11-23 19:39:20 · 665 阅读 · 0 评论 -
重构-按钮(颜色、大小、图标按钮、动态加载按钮、朴素按钮)
实现: 控制加载动图的两种方式 方式一:动态控制传入loading属性 方式二:在组件的componendDidMount回调中向外暴露了两个方法用来控制加载动图的出现/隐藏 传递参数: color:PropTypes.string, 按钮背景颜色 height:PropTypes.string, 按钮高度 width:PropTypes.string, 按钮宽度 borderRadius:PropTypes.string, 按钮圆角原创 2020-11-20 23:43:05 · 691 阅读 · 0 评论 -
重构-多选框(大小、颜色、选中动画和结果回调)
实现: (1)插槽内容的重构 因为this.props.children直接显示,不能给插槽中的组件传递参数但能获取标签内容,所以进行遍历生成对应内容 (2)插槽中的复选框组件,统一使用父组件的点击方法,统一改变复选框的状态,并在父组件中初始化所有复选框状态 (3)点击方法会改变父组件中的统一设置的所有复选框的对应状态,使用传递给父组件的方法,向外暴露复选框的状态 (4)动画的效果主要使用了rotate 和 scale使用: <CheckBox onChange={原创 2020-11-19 23:03:33 · 277 阅读 · 0 评论 -
重构-单选框(颜色、大小、禁用、回调和个数)
实现: 单选框不能设置样式,所以使用div包裹并设置两个div绝对定位覆盖在单选框上,并使得div层级降低,使得能够响应单选框的onChange事件 第一个div为未点击时样式,第二个div为点击样式 通过动态添加类名等实现传递参数改变样式使用: 参数 label:Proptypes.string, 单选框标签 color:Proptypes.string, 单选框颜色 size:Proptypes.string, 单选框大小 v原创 2020-11-19 15:17:30 · 347 阅读 · 0 评论