![](https://img-blog.csdnimg.cn/20190927151053287.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
功能实现
文章平均质量分 52
功能实现
wzw60606
good good study,day day up
展开
-
vue3 + element plus实现树状表格无线层级拖拽功能
通过js使element-plus提供的table树状表格具有拖拽排序的能力原创 2022-04-08 18:25:20 · 6333 阅读 · 11 评论 -
图片懒加载实现
实现原理:当前img标签距离滚动盒子的距离(offsetTop) 小于 (滚动盒子已滚出去的距离(scrollTop)+ 滚动盒子的可视高度(clientHeight)),即可认为img标签进入了盒子的可视区域之内,在此时对img标签的src属性赋值,即可加载图片注:只有img标签的src属性改变了,才会发送资源请求,加载新的图片* { margin: 0; padding: 0;}.box { width: 280px; height: 590px; border: 2px s原创 2021-12-06 20:15:25 · 256 阅读 · 0 评论 -
虚拟滚动列表(动态高)
描述:动态高度需要一个positionData的数组先行存储全部数据量的位置信息。第一次初始化由于不知道cell的具体高度有多少,所以需要先自行预估一个大致的高度cellHeight,然后全部存储在positionData中。存储完成后获取可视区域第一行要渲染的数据的对应索引,即可开始渲染数据。数据渲染完成后,由于是预估的高度,使用的绝对定位导致cell互相重叠,所以在updated生命钩子中,对存储的位置信息positionData数组进行重新校对。注意点:(1)在html中,cell使用了绝对定位,原创 2021-12-15 11:30:32 · 2215 阅读 · 0 评论 -
虚拟滚动列表(固定高)
描述:滚动列表数据量庞大的时候(如一万条数据),会在页面创建一万个DOM元素,而页面的DOM太多会对页面的渲染造成很大的负担,出现页面卡顿等情况,严重的减少用户体验感,所以需要使用虚拟滚动列表,对长列表功能模块进行优化。在head中导入vue<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>css* { margin: 0; padding: 0;}.container原创 2021-12-14 11:45:39 · 1181 阅读 · 0 评论 -
群聊可@输入框
简介:群聊@他人的输入框实现。使用h5新增的contenteditable属性,使标签拥有可供输入的能力。对输入框的光标位置获取使用window.getSelection()实现,可查看文档。@弹框支持键盘上下按键对列表进行滚动选择,支持输入文字对列表进行数据筛选。按下enter确认选中后,依赖canvas将选择的名字进行绘画,生成一张base64的图片以供预览。注:键盘上下操作滚动列表可参考另一篇文章,键盘上下选择列表项html<!-- 编辑区域 --> <div clas原创 2021-11-29 21:35:23 · 428 阅读 · 0 评论 -
改变字符串部分字体的样式
得到的newStr用 innerHtml 进行渲染原创 2021-09-16 18:00:55 · 174 阅读 · 0 评论 -
通过js下载图片或文件
url链接一般由后台提供注: download属性只有在同源的情况下才会生效( 项目部署地址和接口地址在一个服务器上 )原创 2021-09-16 16:56:40 · 2096 阅读 · 0 评论 -
键盘上下选择列表项
效果html<ul class="father"> <li class="bgc">0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li>原创 2021-09-16 16:40:08 · 439 阅读 · 0 评论 -
实现列表拖拽排序
使用h5新增的拖拽属性draggable实现多个列表各自拖拽排序功能,多个列表之间互不影响。拖拽过程可见元素变动,而不是单纯等拖拽完再更新domhtml<p class="title">列表一</p><ul> <li> <span class="drag">1</span><span> asdasdasdasd</span> </li> <li&原创 2021-08-28 20:14:35 · 1491 阅读 · 0 评论