组件 按需引入原理_神奇大叔的博客-爱代码爱编程
import { Button } from 'element-ui' 以Element UI为例，为实现按需引入，需要借助 babel-plugin-component 这个 webpack 插件，并且配置 .babelrc { "presets": [["es2015", { "modules": false }]], "plugins"
重构-抽屉(左右抽屉)-爱代码爱编程
动画: 抽屉出现背景渐变 抽屉出现消失移动动画 实现: display从none到block产生过渡动画:使用animation 监听animation结束动画:onAnimationEnd 参数: App.propTypes = { show: PropTypes.bool, 是否显示抽屉,true显示 right:
重构-下拉菜单-爱代码爱编程
动画: 点击标题伸缩 点击菜单项伸缩 实现: 子元素未知高度过渡:通过js获取子元素高度后,再将其隐藏,后续就可通过获取的高度进行动画过渡 参数: App.propTypes = { click: PropTypes.func, 点击菜单项回调,第一个参数是索引,第二个参数是菜单项内容 title:PropTypes.str
重构-标题栏(超过一定距离居中、可手势切换)-爱代码爱编程
动画: 标题栏居中移动 标题下的提示栏移动且宽度随标题大小改变 内容区域移动 实现: 标题栏居中移动: move:记录标题容器的移动距离,因为只要标题栏移动,move一定是<0的; (1)获取到标题栏所有标题总宽度、标题栏容器宽度、将某个标题移动到中心的距离 中心距离:标题栏容器宽度/2-选中的标题宽度/2 (2)
重构-对话框-爱代码爱编程
动画: 出现下滑、消失上滑渐变 实现: 通过ReactDOM.render实现组件的挂载和数据的隔离,ReactDOM.unmountComponentAtNode和removeChild来清除节点 通过Promise来实现对话状态的回调,即将Promise的reject和resolve传进组件,在组件内部调用 使用: 方
重构-消息提示框-爱代码爱编程
动画: 消息下滑出现 点击消息上移消失 消失时后面所有消息框上移滑动 实现: seed消息个数 instances:[] 当前所有消息框实例数组 点击出现消息,且会在前面的消息之后顺序排列,每个消息出现都具有下滑动画,通过定位top和seed来进行排列,通过定时器100毫秒延迟添加类实现下滑动画 点击消息上移,点击添加类实现上移消失
重构-加载区域-爱代码爱编程
动画: 圆环旋转、圆环虚线运动 实现: 圆环使用svg来设置,通过设置圆的实现和虚线距离来产生圆环运动效果 使用插槽特性,来指定需要加载的区域 参数: loading: PropTypes.bool, 是否将区域加载 background:PropTypes.string, 加载背景色,传入具有透明度的rgba颜色
重构-圆角消息提示(右上角)-爱代码爱编程
动画: 消息出现/消失渐变 参数: value:PropTypes.oneOfType([PropTypes.string,PropTypes.number]), 要显示的内容 hidden:PropTypes.bool, 是否隐藏,默认为false dot:PropTypes.bool, 消息是否为一个圆点,此时不设置valu
重构-分页器-爱代码爱编程
动画: 无 实现: startX变量来记录要渲染的中间按钮的起始页数 pageNum变量来表示要渲染的中间按钮的个数 currtX变量来记录当前的页数 (1)首尾固定数值 (2)根据传递的中间按钮要显示的个数 如果要显示的个数+首尾固定的2个数<=总页数,则不会出现省略号, (3)渲染中间按钮个数 1、要渲染的个
重构-树形结构(左侧多级菜单)-爱代码爱编程
实现多级展示: 递归组件 实现点击显示/隐藏子菜单: 利用js对象特性,无属性也可以添加,即每个属性添加个flag,用来控制是否显示当前标签的子标签 即点击当前标签，给渲染数据的对象添加flag,决定子标签是否显示 传递参数结构: [{label:'标签名',children:[{label:'子标名'}]}] 缺陷: 高度未知,使用max-
重构-环形进度条-爱代码爱编程
动画: 颜色变化、宽度增加 圆环实现: svg中两个圆,背景色都为none,通过设置边框为虚线,其中一个做背景,虚线的实线长度来实现圆环,实线还要设置stroke-linecap: round;形成圆角 参数: percentage: PropTypes.number, 数值,0-100 onSuccess: PropTypes.func
重构-线性进度条-爱代码爱编程
动画: 传递颜色数组后,颜色过渡 宽度改变有0.6s过渡 参数: percentage: PropTypes.number, 进度数值,0-100 onSuccess: PropTypes.func, 当加载到100%时,触发回调,第一个参数是状态 colors: PropTypes.array, 颜色数组,会根据传递的颜色,在不
重构-标签(多元)-爱代码爱编程
动画: 删除图标的移入移出颜色渐变 添加标签后,添加的标签伸缩变化(实际是旋转实现) 设置索引来指向添加的标签,为其添加一个类,类使用帧动画(才能一开始就加载动画) 添加标签的实现: 动态切换添加按钮和输入框 输入内容后,光标消失时,将不为空的内容放进数组,重新渲染 参数: tags: PropTypes.array, 标签数
重构-表格-爱代码爱编程
参数: delete: PropTypes.bool, 是否增加删除 data: PropTypes.array, 数组数据 onDelete: PropTypes.func, 删除回调,第一个参数是删除后的所有内容 tableHeight: PropTypes.string, 表格高度 titleHeight: PropT
重构-五星评分-爱代码爱编程
动画: 移入到某个星星位置,之前的星星高亮变大,后面的星星暗色不变 实现: 动画: (1)通过一个索引,索引值为-1,每当移入到星星时,索引变成当前索引,当星星自身的索引小于等于改索引时,添加样式高亮, (2)移出所有星星时,重新将索引设置为-1,使得星星保持初始样式,同时为了在移动过程覆盖初始样式,移出所有星星时还原初始样式,还要在显示初始样式
重构-传送文件-爱代码爱编程
动画: 移入移出边框变色 参数: onLoad: PropTypes.func, 回调参数,第一个参数是上传的所有文件,每个文件包含转换后base64码的url、文件名称、文件大小、文件类型 limit: PropTypes.number, 限制上传的文件个数,默认为9 drag:PropTypes.bool, 是否开启拖拽
重构-滑块(拉动条)useReducer版本-爱代码爱编程
实现: hooks实现 动画: 提示框渐变显示 参数: disabled: PropTypes.bool, 禁用 onChange: PropTypes.func, 拉动回调,第一个参数是进度数值,防抖默认200毫秒 value: PropTypes.number, 初始进度值,0-10 sliderHeight:PropTypes.
重构-滑块(拉动条)-爱代码爱编程
实现: hooks实现 动画: 提示框渐变显示 参数: disabled: PropTypes.bool, 禁用 onChange: PropTypes.func, 拉动回调,第一个参数是进度数值,防抖默认200毫秒 value: PropTypes.number, 初始进度值,0-10 sliderHeight:PropTypes.
重构-下拉框-爱代码爱编程
动画: 选择按钮旋转 下拉框伸缩 边框、图标、选项hover变色 参数: placeholder:PropTypes.string, 预展示内容,不写则默认展示传入的list数组第一条内容 selectWidth:PropTypes.string, 展示框的宽度 fontSize:PropTypes.string, 展示框
重构-开关Switch-爱代码爱编程
收获: 当给根类设置transition:ns时,当根类的属性变化都会产生过渡态,即当再添加一个类,这个类出现/消失会出现两种过渡态 动画: 按钮移动、轨道颜色渐变 参数: static propTypes={ trackWidth:PropTypes.string, 开关轨道宽度 trackHeig