- 博客(41)
- 收藏
- 关注
RSS订阅原创 vue3-scroll-more：横向滚动条-元素或页签过多滚动显示处理的组件
vue3-scroll-more是一个Vue3横向滚动组件，适用于需要展示多标签页等横向滚动场景。主要特性包括：支持鼠标滚轮/按钮滚动、显示隐藏内容数量、拖拽排序功能、自动跳转定位等。组件提供丰富的配置项，如设置滚动速度（autoScrollRate）、自动跳转模式（autoJump）、是否显示隐藏内容（showHidden）等。通过作用域插槽可自定义内容渲染，并支持左右两侧独立插槽。安装简单，支持npm/pnpm/yarn/bun多种方式，既可作为全局组件也可局部引入。该组件能有效解决横向空间不足时
2026-06-26 02:30:49
292
原创 lecen：一个更好的开源可视化系统搭建项目--动态绑定、操作快捷键--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了利用可视化设计器构建应用系统中动态绑定数据的两种方式：1)通过#符号获取作用域插槽数据，如#row.name获取表格行数据；2)通过@符号获取collectionData数据，如@cardTitle获取卡片标题。详细演示了表格组件和卡片组件的动态数据绑定过程，包括插槽内容设置、数据源绑定和表达式编写。同时还提供了设计器操作的快捷键指南，包括面板唤出、组件切换等。
2026-01-12 17:54:50
669
原创 lecen：一个更好的开源可视化系统搭建项目--全局对象使用--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了可视化系统搭建项目的全局对象 G，它包含了系统内共享的全局对象、公共属性和工具方法。这些功能模块可在系统任何地方直接调用，包含了关于菜单、路由、跳转、用户等操作的访问，为开发者提供了统一的全局访问入口和便捷的工具集
2026-01-11 19:54:31
1034
原创 lecen：一个更好的开源可视化系统搭建项目--数据、请求、寄连对象使用--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了可视化系统搭建项目的数据对象(B)、请求对象(R)、寄连对象(P)的管理数据和功能：B对象处理基础数据（initData初始化数据、collectionData视图绑定数据等）；R对象管理请求链接，提供prepare预处理和trigger触发请求功能；P对象负责执行寄连操作，支持手动触发runIt方法。
2026-01-10 19:31:31
1094
原创 lecen：一个更好的开源可视化系统搭建项目--组件和功能按钮的权限控制--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了利用可视化设计器构建应用系统中的组件和功能按钮的权限控制功能。从权限维度来说可以通过用户拥有的角色和动态code来配置，从控制手段来说可以通过操作视图和dom元素来配置，实现权限控制的方式主要有：标识编码(code)、有用的权限(permission)、不具有的权限(noPermission)、判断语句(if)、回调函数(call)、节点元素(dom)、视图(view)等，并展示了权限变更时的实时效果。这种灵活的权限控制机制可以满足各类复杂业务场景的需求。
2026-01-09 14:01:44
951
原创 lecen：一个更好的开源可视化系统搭建项目--数据(_data)、类名(_class)--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了可视化设计器中组件的数据绑定和类名绑定，数据绑定使用_data来实现，主要包括表格组件(lc-table)、虚拟列表组件(lc-list)、树组件(lc-tree)，凡是具有data属性的组件都能够通过接口返回值和手动指定数据的方式进行数据的填充。类名绑定使用_class来实现，通过简写的方式来绑定类名，并提供了类名格式的基本约定。
2026-01-09 00:17:50
1100
原创 lecen：一个更好的开源可视化系统搭建项目--文本、图片、图形、原生元素--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了可视化设计器中几种基础组件的使用方法：1. 文本组件(text)支持静态内容、函数返回值和数据绑定三种形式，可应用于各类文字展示场景；2. 图片组件(lc-image)支持加载本地和远程图片资源；3. 图形组件可自定义SVG矢量图标；4. 原生元素组件(native)支持通过标签名动态创建任意HTML元素。这些基础组件为快速构建应用系统界面提供了灵活的可视化解决方案。
2026-01-07 21:27:23
1033
原创 lecen：一个更好的开源可视化系统搭建项目--表格、列表--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了如何利用可视化设计器构建应用系统中的表格和列表组件。表格组件支持动态添加列、绑定数据、自定义表头和内容，通过插槽可以灵活添加按钮等交互元素。列表组件可用于渲染下拉选项等多种场景，支持手动或接口方式绑定数据，子组件可通过作用域获取数组项值。文章通过具体示例演示了如何创建带数据的表格和下拉选择框，展示了组件的灵活配置能力。
2026-01-06 23:08:33
884
原创 lecen：一个更好的开源可视化系统搭建项目--人员管理、身份管理--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了利用可视化设计器构建应用系统中的人员管理和身份管理功能。人员管理模块采用树形结构展示组织与用户层级，支持新增/编辑组织与人员、配置身份等操作，并提供多选批量处理功能。身份管理模块将权限控制抽象为"身份"概念，支持创建身份分类（如会员等级）及具体身份，可配置应用菜单权限。系统通过身份配置实现对不同用户的权限管理，支持身份反查、批量更新等操作。
2026-01-05 10:44:54
1118
原创 lecen：一个更好的开源可视化系统搭建项目--线上代码的版本控制--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了如何通过可视化界面实现线上代码的版本控制，主要包括三个核心模块：本地git文件管理、远端git文件管理和git日志与配置。系统将数据库中的代码记录转换为文件存储，支持完整的git操作流程，包括初始化仓库、文件同步、提交管理、远程仓库配置等。同时提供了详细的日志查询功能，可查看提交记录、文件修改差异和当前文件状态。该系统实现了类似本地开发的版本控制体验，适用于多人迭代开发的工作场景
2026-01-04 09:59:26
649
原创 lecen：一个更好的开源可视化系统搭建项目--数据模拟配置(mock)--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了可视化配置工具中Mock数据模拟功能的使用方法。系统通过集成Mockjs实现前后端分离开发时的接口模拟，支持可视化配置各类Mock数据。文章详细讲解了七种数据类型的生成规则（字符串、数字、布尔、对象、数组、函数、正则），包括重复次数设置、数值范围限定、概率控制等特性。同时介绍了配置界面的操作方式，如占位符选择、实时预览、模糊查询等功能，并提供了Mockjs官方文档链接供深入参考。该系统能够帮助开发者在接口未完成时快速生成符合约定格式的测试数据。
2026-01-03 14:23:35
809
原创 lecen：一个更好的开源可视化系统搭建项目--模块、路由、字典、文件--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了可视化设计器中模块配置、路由配置和字典配置三个核心功能的使用方法。在模块配置部分，详细说明了如何创建模块、子应用，以及设置应用图标、路由等操作；路由配置部分讲解了菜单管理的流程，包括创建父子路由、绑定页面等步骤；字典配置部分则展示了如何创建字典分类和字典项，以及字典间的关联操作。文章通过图文结合的方式，直观呈现了各功能的操作界面和配置流程，帮助用户快速掌握系统配置方法。所有配置内容最终都将服务于身份管理和应用系统构建。
2026-01-02 15:34:27
739
原创 lecen：一个更好的开源可视化系统搭建项目--页面、模板、元组--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了利用可视化设计器构建应用系统的页面管理功能。系统采用统一文件渲染所有页面，页面由数据视图、请求链接和执行寄连三部分组成。用户可通过新增功能创建页面并配置相关字段，支持查看、设计、编辑、复制、删除等操作，还能将页面转为模板或元组实现复用。系统提供关联寄连、视图和链接的管理功能，支持多条件查询。模板管理和元组管理功能进一步提升了页面复用性，支持快速开发。
2026-01-01 12:42:09
750
原创 lecen：一个更好的开源可视化系统搭建项目--页面设计器(表单设计器)--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了一个可视化页面设计器的使用方法和核心功能。设计器采用拖拽式可视化编辑方式，分为三大功能区：视图绘制区域（放置页面组件）、组件面板（提供UI组件库）和属性面板（配置组件属性和事件）。系统通过统一的设计器生成标准化页面代码，并由统一解析器渲染，实现所见即所得的效果。 设计器支持行列嵌套布局、组件快捷操作（提供多种快捷键）、右键菜单编辑和组件属性深度配置。属性面板支持组件层级导航、位置调整和详细配置，满足各种定制需求。整个设计过程无需本地开发环境，直接在网页中完成页面构建和实时预览。
2025-12-31 16:58:46
883
原创 lecen：一个更好的开源可视化系统搭建项目--执行寄连、数据视图、请求链接--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
本文介绍了利用可视化设计器构建应用系统的核心功能模块——执行寄连、数据视图和请求链接。执行寄连是将可复用的代码片段封装成处理单元，支持自动或手动调用，可在页面生命周期不同阶段执行，实现代码复用和逻辑解耦。数据视图通过JSON描述页面结构和组件属性，支持行列嵌套布局和插槽机制，实现可视化页面设计。请求主要是用来加载页面中的各种数据，以及发送数据到后端，支持mock，并自动绑定页面组件渲染数据。通过这三种机制，开发者可以高效构建灵活、可复用的应用系统，减少业务代码冗余。
2025-12-31 00:17:05
964
原创 lecen：一个更好的开源可视化系统搭建项目--介绍、搭建、访问与基本配置--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
摘要： Lecen是一套创新的低代码可视化系统搭建平台，通过组件插槽、请求链接和执行寄连实现可视化配置，支持页面设计、Mock数据配置及版本管理。系统设计考虑了快速交付、组件复用、动态呈现等需求，降低开发维护成本。项目分为前端(lecen-web)和后端(lecen-server)，提供代码持久化、权限控制等功能。本地搭建只需克隆GitHub/Gitee仓库即可启动，适合高效构建企业级应用系统。
2025-12-29 16:09:46
950
原创 实现一个组织人员等的好用的树选择组件，给你想要的
树结构有它独有的优势，各大组件库也都对它有自己的实现，功能也是相当丰富，能满足绝大部分场景。但是也有一些时候，我们想要这样那样，感觉它不是很尽如人意。感觉不舒服那就要想办法，自己实现一个树，这样就可以完全自定义了，再结合上自己的一点小想法，做出来的组件用起来就舒服多了。既然决定了要自己重新做，那么就考虑一下工作内容，实现一个树组件起码得保证它具有一些基本功能，比如：① 支持层级展开收起功能② 支持树节点的多选功能③ 支持树节点的单选功能④ 支持父节点一键选中或取消所有，以及半勾选状态。
2024-02-18 10:23:55
1989
2
原创 利用js和css，页面如何实现禁止复制与禁止调试等限制操作
在我们开发系统的时候，可能会接到这样的需求：不要让用户复制页面上的文字或者图片，不要让用户调试我们的页面，更甚至也不要让用户进行打印操作等等。我们可以通过css来控制，也能够监听用户打开控制台的操作，从而达到我们想要的目的
2023-10-12 10:25:44
4723
原创 CSS之contain，一个连fixed定位都要看它眼色的限制属性
通过layout可以使得该元素的布局与元素外的任何内容相互独立，互不影响。即该元素所构成的容器从页面中隔离出来，单独计算布局。 通过paint可以限制该元素的绘制区域范围，子元素的渲染永远不会出现在容器外，容器的边界限定了子元素的可见内容。例如容器在屏幕外，那么就永远不用绘制，因为其子元素也肯定在屏幕外，不像margin负值放在屏幕外那样，子元素可能延伸到屏幕内
2023-09-26 09:49:46
1120
原创 CKEditor5导入并解析word功能的集成，实现word转html
这是一个高级功能，虽然不是很常用，但是有一些特殊的场景或者需求，我们可能希望从编辑好的word中，通过导入的方式来让用户在网页中继续编辑它，并尽可能的保留内容和格式。用CKEditor5的导入word功能，把这个word导入到编辑器中，解析完成之后就看到了效果，它的还原度很高了，里边包含了段落、列表、图片、表格等等多个技术点
2023-09-19 09:20:33
4395
14
原创 CSS之font-size的说明与妙用
font-size用来设置页面的字号，他有很多种指定方式，像绝对值、相对值、长度值、百分比值、数学值、全局值。用它怎么设置比浏览器最小字号更小的字号，并能够让页面实际渲染出来？ 我的文字之间为什么有空隙，两个span标签不挨着，两个图片中间有空白条？
2023-09-18 09:55:40
13183
原创 页面可视化设计——用拖拽的方式搭建你的系统|点点更轻松
我们一直都致力于更好，无论对于个人、团队、公司来说，追求的点是各式各样的，像是低成本、高效率、可复用、易上手、易维护。我们使用可视化页面设计器，快速的完成了一个歌单页面的实现，我们通过数据视图、请求链接、执行寄连的设计理念，分步完成了它们各自的设计，整个过程简单、透明、方便...
2023-06-15 05:00:00
4619
2
原创 js使用一种方法搞定所有的字符串截取：突破substring的限制
字符串是最基本的数据类型，它有三种最常见的操作：拼接、分隔、截取。利用了重载的方式，我们根据不同的参数类型，进行了不同的处理，并且扩展了substring所不能支持的功能，我们实现了各种各样的字符串截取方式，使得我们对于字符串的操作更加灵活...
2023-06-08 05:45:00
501
原创 让你的系统支持git管理：使用isomorphic-git让数据库具备版本控制
我们日常开发工作中避免不了要使用代码管理工具，其中git是我们熟知的一种，通过isomorphic-git实现了从数据库到服务器到github的数据版本控制。并具备了初始化、添加、提交、同步、推送、拉取、信息配置、提交日志查看、文件日志查看、文件状态查看、配置信息查看...
2023-06-05 09:28:38
629
原创 mock数据可视化生成：动动鼠标就可以创建一个前端自己的接口
通过可视化mock数据生成器，模拟了一个接口返回值的数据集，操作简单、方便、快捷，在我们没有后端数据的情况下，可以自己来生成这样一份数据供我们调试。可视化操作不是我们的终极目标，它只是我们开发过程中的一个手段，或者说帮助我们作业的一个工具，通过它来解决绝大部分的问题就可以，降低成本，提高生产力。主要分为：操作区、分类区、辅助区、 属性区、数据区、展示区、帮助区、提示区、...
2023-05-28 06:15:00
1137
1
原创 标签输入框tag-input：仿QQ邮箱来增强你的组件交互与界面展示
输入框的场景实在太多太多了，但我们偶尔也会碰到一些个性化的需求，今天给大家介绍的就是类似上面这样，可以显示标签的输入框。 先来假设一下我们的输入需求： 能对输入的内容进行校验、可以在任意位置插入新标签、可以拖动标签进行排序换位置、支持键盘快捷键操作、支持自定义插槽以丰富组件定制化...
2023-05-23 16:41:50
1770
6
原创 js中this是什么，代表谁，详解看懂了却总碰到难以解释的现象？
虽然我们在日常开发中遇到this的难以理解的行为，可以通过各种方法去变相解决，但深入的去理解它的行为机制，有利于我们设计出更好的程序代码。我们不去说概念、说定义，也不用去背场景、背例子，更不会去长篇大论的深入展开，因为这些网上都是一大堆，而且跟记英语一样，没过几天就又蒙圈了。主要有：普通函数、箭头函数、构造函数、call/apply、bind、对象、类、事件处理这八种环境，不要被吓到，看着很多，其实只要牢记上面的口诀，一切都变的简单，它们都是一样的，其他的场景也
2023-05-15 02:42:04
596
原创 用CSS实现一个类似Element-plus的文字虚化效果
我们可能看到过这样的一个效果：页面中的内容滚动穿过某个固定元素时，会产生虚化的视觉效果，能看出文字的轮廓，但是却无法看到具体的内容，给人一种哎呦？不错哦的感觉。我们来拿element-plus官网作为案例，看看它是如何实现的，创造力是无穷的，就看谁的花样多！
2023-01-29 23:14:22
1357
原创 F12-开发者工具常用操作与使用说明之网络network
发送请求已经是我们最基本最常见的需求了，而且我们也在频繁的接触它，但是我们经常会遇到各种各样的问题，有些错误很明显，我们直接就能定位问题所在，但是有一些问题总是让我们抓不到头脑，今天就来给大家讲解，或者说介绍一下关于网络面板的一些使用技巧，能够帮助我们快速排查定位问题，以至解决遇到的问题，启动器(Initiator)会展示出该请求的触发链路，即：该请求是由谁触发的，并且它的调用者是谁，以及更上层的调用者
2022-11-13 23:53:52
16428
4
原创 计算属性computed和侦听属性watch有什么区别？你会使用它们吗？
computed有缓存，是把该变量指向每次的执行结果，当响应式依赖变化时，vue会自动再次执行，而methods是把该变量指向函数，在用到的地方都会再次执行，而且当dom更新的时候，vue也会重新执行对应的方法，因此需要注意避免死循环，watch无所谓缓存不......
2022-08-29 10:20:25
1527
原创 F12-开发者工具常用操作与使用说明之源代码sources
我们可以关联本地的一个文件夹，当在内容区域修改该文件夹中的内容时，会同步修改磁盘中的文件，适合实时修改项目文件，并会直接同步到编辑器中，也可以使用本地中的文件替换当前页面中的文件，适合在调试过程中实时修改代码，但不会保存到磁盘中，还可以新建代码段，主要用来执行一些预置脚本代码，这样可以不用每次都编写同样的调试代码，直接执行相应的代码片段即可，而且......
2022-08-14 02:42:51
21625
原创 JS中的重载——如何实现一个类似这样的功能，我也想玩玩
在js中主要有以下几种实现重载的方式：1. 使用剩余参数的形式来接收可变的参数，并通过一些判断手段来处理不同情况的逻辑。2. 使用arguments的形式，来动态判断需要执行的操作3. 使用proxy的形式来拦截函数的行为，以达到控制不同的逻辑分支......
2022-08-07 10:11:30
628
原创 prototype是原型对象，那__proto__又是什么呢，总不能是别名吧？
prototype为函数特有属性，只有函数才具有原型属性，以供继承，对象也能继承主要是通过__proto__的连接__proto__表示一个对象指向它的构造函数的原型的指针，也就是说一个对象的__proto__指向它的构造函数的原型......
2022-08-01 00:54:41
690
原创 折磨人的Promise——你还能给我整什么新花样
可以说现在是promise遍天下，我们都知道JS分为同步任务和异步任务，而异步任务又分为宏任务和微任务。 宏任务总是在下次事件循环的开始后执行，微任务总是在本次事件循环阶段的结束前执行，如果不断......
2022-07-29 00:47:31
234
原创 CSS的众多小技巧之选择器：你还在为样式不生效而感到苦恼吗？
我写的样式老不生效啊，该怎么办呢？要不来个!important吧！改到最后发现随处都可见!important。你是否不知道如何选中需要设置样式的元素，也不知道怎么区间选择指定的元素列表？我来带你走近它们，轻松搞定遇到的问题......
2022-07-11 18:57:19
1014
原创 JS的众多小技巧之高傲的正则表达式(RegExp)：你真能行
如果你对正则表达式望而却步，或者对它毫无头绪，不知道自己的需求场景是否适合使用正则表达式，那么我们接下来就去了解一下正则的一些特性，揭开它神秘的面纱，然后再回过头来看上面的例子，就会觉得一目了然，甚至不过如此......
2022-07-10 06:43:41
371
原创 JS的众多小技巧之神奇的toString：你啥也能
toString真是一个让我爱不释手的方法，虽然它的职能定位很简单也很清晰，但是有的时候总是老忍不住使用它应用在一些其他的场景中。那么它能做什么，能帮助我们简化或者解决哪些复杂的问题呢？能否利用这种方法，甚至可以在代码块级别的粒度上高度抽象出来复用性强、耦合度低、易维护的功能呢？下面就让我来为大家一一道来......
2022-07-08 03:31:59
429
原创 模拟浏览器限制并发请求数量-如何将大量请求利用补位机制发送
管中可窥豹，亦可窥花猫。我们都知道，浏览器在发送请求的时候，有最大并发数量的限制，无论更多或是更少，都会带来不同的利弊，那么从前端的技术角度触发，我们能不能来模拟实现一下自己的一套限制机智呢？通过回调与generator函数来实现一下吧......
2022-07-04 10:14:58
1071
原创 monaco-editor浏览器中的网页代码编辑器在项目中集成
我们已经习惯了使用编辑器来编写代码，作为一名前端开发人员，有时候难免会遇到需要在浏览器中书写代码的场景。无论是用户需要还是我们自己为了开发便利，这都将是有益的。在网页中编辑很容易，但是能不能让我们像在本地编辑器中那样编写代码，提供丰富的功能呢？目前有很多个开源项目针对此问题实现了各自的一套解决方案。在此就以monaco-editor集成到vue项目中为例，为大家解决此类问题...
2022-06-15 18:54:51
4709
1
原创 F12-开发者工具常用操作与使用说明之控制台console
我们在开发的过程中，无论书写什么样的代码，构建什么样的项目，调试程序都是不可或缺的一步，如果能熟悉控制台提供的这些功能，并掌握一些操作的小技巧，那么将会极大的提高我们创作的质量与效率。......
2022-06-15 18:52:25
19090
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人