![](https://img-blog.csdnimg.cn/2021031614123120.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
打工人的笔记
记录一些值得记录的需求的实现
Kate0204
一只程序媛
展开
-
基于Vue递归组件的嵌套列表组件设计
需求背景:元素列表可以成组、可以嵌套成组,组可以展开收起。技术选择:Vue的递归组件机制。其实也就是一个引用了自己的组件。实现方法:列表的data为一个数组类型的树elementsTree,每个item除了自己的id、name等属性外,一个数组类型的elements属性,表示子元素列表。使用Vue.component注册组件element-item,每个element-item除了渲染自己的名称等样式外,还根据elements属性循环渲染自己的子元素列表。Vue..原创 2020-06-24 15:29:21 · 791 阅读 · 0 评论 -
使用 HTML5 Drag API 实现列表的嵌套拖拽
需求与背景:元素列表,多选后可以成组,支持最多3层的嵌套组。现要求可以拖拽元素,实现顺序的交换、组间的移动;移动时,显示位置提示的样式,放进组内与并列的样式不同;支持多选拖拽。技术选择:HTML5 Drag API使用的事件:dragstart 被拖动元素 dragenter 经过元素 dragover 经过元素 dragleave 经过元素 dragend 被拖动元素未使用的事件:dragexit ? ...原创 2020-06-24 14:38:15 · 1417 阅读 · 2 评论 -
使用正则表达式实现不区分大小写的高亮搜索
需求:搜索框输入变化时,匹配符合的元素匹配部分高亮。背景:元素名称为<input>,可以重命名。设计方案:搜索状态时,通过正则匹配,将<input>组件通过DOM操作,替换成<span>分割的字符,通过<span>的class实现高亮样式;在重命名时,显示回原来的<input>组件。主要方法:主要为正则匹配替换的方法。 handleSearchMode: function(pattern) { if(p原创 2020-06-24 11:01:55 · 1253 阅读 · 0 评论