常用需求案例
文章平均质量分 57
未来的树
前端程序猿一枚
展开
-
节流防抖案例
节流防抖 什么是截流防抖 这一概念最早出现在工业设计中,对电子元器件的控制和对水流等流体的限制,可以起到保护器件,减少损耗的作用 防抖 debounce 字面意思就是防止抖动,比如人们在操作手抖多次误触 主要应用场景 输入框中频繁的输入内容,搜索或者提交信息; 频繁的点击按钮,触发某个事件; 监听浏览器滚动事件,完成某些特定操作; 用户缩放浏览器的resize事件; 节流 throttle 限制流量,很直接的理解 主要应用场景 监听页面的滚动事件; 鼠标移动事件; 用户频繁点击按钮操作; 游戏中的一些原创 2021-07-19 18:31:34 · 141 阅读 · 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 · 581 阅读 · 0 评论 -
前端表格分页预处理
在前端表格分页预处理 需求背景 需要前端对表格数据进行预分页处理后进行新增,组件选用 elementUI 中的表格和分页,使用vue 常规的数据分页多由后端处理,通过不同的 pageSize 和 pageNum 进行控制分页, 前端对此数据处理其实也大同小异 实现原理如下 需要的数据 通常对一数组内的数据进行分页处理,我们需要根据原数组获得以下信息 总条数 total ,既数组长...原创 2020-04-17 14:15:27 · 585 阅读 · 0 评论 -
table自适应及常用相关配置
table自适应及常用相关配置 这是一个常用的表格样式,故进行了整理归纳,后续遇到好的表格会进行分享; 代码贴在最后 实现效果,表头th标签定宽,后面内容实现宽度自适应,平均分配; 当内容超出时用省略号隐藏超出部分; 鼠标hover于内容上时换行显示内容(但应当注意行高和横向滚动条) table-layout: fixed; table-layout: fixed; /*该项配置是表格内容的宽度...原创 2020-03-16 18:51:14 · 757 阅读 · 0 评论 -
CSS多余文本省略号显示
CSS多余文本省略号显示 本次案例代码是在 elementui 当中的 table 组件中实际需求 当然使用的是纯 CSS3 代码,所以原生支持度高,兼容性高,所以可多场景应用 对于过长文本进行单行省略显示,当鼠标移动到对应文本行时,展示全部,当鼠标离开后又恢复单行,多余内容收缩出现省略号 /deep/.el-table__row { .cell { //对超出内容隐藏 ...原创 2019-11-02 22:51:47 · 330 阅读 · 0 评论