![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
常用需求案例
文章平均质量分 57
未来的树
前端程序猿一枚
展开
-
节流防抖案例
节流防抖什么是截流防抖这一概念最早出现在工业设计中,对电子元器件的控制和对水流等流体的限制,可以起到保护器件,减少损耗的作用防抖 debounce字面意思就是防止抖动,比如人们在操作手抖多次误触主要应用场景输入框中频繁的输入内容,搜索或者提交信息;频繁的点击按钮,触发某个事件;监听浏览器滚动事件,完成某些特定操作;用户缩放浏览器的resize事件;节流 throttle限制流量,很直接的理解主要应用场景监听页面的滚动事件;鼠标移动事件;用户频繁点击按钮操作;游戏中的一些原创 2021-07-19 18:31:34 · 146 阅读 · 1 评论 -
纯css实现多行文本展开收起
纯CSS实现多很文本展开收起常见方案基础的css实现多行文本省略显示在工作中非常常见p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}但是很多时候会要求实现展开收起模块就像这样:如图那种只要控制overflow状态就可实现标准的固定高度的展开收起很好做,但是很多时候是按照文本行数来判断,同时要适应不同宽度的弹性布局,这时候常见的方原创 2021-07-13 14:38:10 · 594 阅读 · 0 评论 -
前端表格分页预处理
在前端表格分页预处理需求背景 需要前端对表格数据进行预分页处理后进行新增,组件选用 elementUI 中的表格和分页,使用vue 常规的数据分页多由后端处理,通过不同的 pageSize 和 pageNum 进行控制分页, 前端对此数据处理其实也大同小异 实现原理如下需要的数据 通常对一数组内的数据进行分页处理,我们需要根据原数组获得以下信息总条数 total ,既数组长...原创 2020-04-17 14:15:27 · 591 阅读 · 0 评论 -
table自适应及常用相关配置
table自适应及常用相关配置这是一个常用的表格样式,故进行了整理归纳,后续遇到好的表格会进行分享;代码贴在最后实现效果,表头th标签定宽,后面内容实现宽度自适应,平均分配;当内容超出时用省略号隐藏超出部分;鼠标hover于内容上时换行显示内容(但应当注意行高和横向滚动条)table-layout: fixed;table-layout: fixed;/*该项配置是表格内容的宽度...原创 2020-03-16 18:51:14 · 770 阅读 · 0 评论 -
CSS多余文本省略号显示
CSS多余文本省略号显示本次案例代码是在 elementui 当中的 table 组件中实际需求当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用对于过长文本进行单行省略显示,当鼠标移动到对应文本行时,展示全部,当鼠标离开后又恢复单行,多余内容收缩出现省略号/deep/.el-table__row { .cell { //对超出内容隐藏 ...原创 2019-11-02 22:51:47 · 333 阅读 · 0 评论