- 博客(8)
- 收藏
- 关注
RSS订阅原创 Tiptap 自定义节点编辑器实现方案
本文介绍了基于Vue.js 2和Tiptap编辑器实现的富文本编辑器方案，核心功能包括自定义参数节点（可选择参数和动态参数）、超链接管理等。通过扩展Tiptap节点实现了交互式参数选择功能，支持维度/指标参数插入、下拉菜单选择及子菜单显示。编辑器还提供丰富的文本格式化选项（加粗、斜体、字体颜色等）和超链接操作功能。技术实现上采用@tiptap/vue-2及相关扩展插件，版本为2.27.1，通过自定义节点定义实现了参数节点的动态渲染和交互逻辑。该方案适用于需要嵌入动态参数选择的富文本编辑场景。
2026-01-23 14:18:16
282
原创 自定义组合树
CustomTree是一个基于Vue3+TypeScript开发的递归动态筛选树组件，支持条件动态添加、删除和组合。核心功能包括：递归渲染多级节点、AND/OR组合关系切换、自动层级优化等。组件采用父子结构设计，父组件维护核心数据，子组件实现递归渲染。数据结构定义了筛选字段配置和动态树节点接口，支持条件组合和递归查询。组件提供了重置、查询等基础功能，并可通过扩展实现节点拖拽、条件复制等高级功能。适用于BI平台、数据筛选等需要复杂条件配置的场景。
2025-12-30 19:01:05
403
原创 sql-formatter组件执行 format 方法时，会将 SQL 中的 != 运算符自动格式化为 ! =（插入空格）
摘要： SQL格式化工具sql-formatter会将!=运算符自动拆分为! =，影响SQL语法一致性。问题根源在于该工具严格遵循ANSI SQL标准，将!和=视为独立运算符。解决方案分版本： v10+版本：通过operators配置自定义运算符，强制取消空格（如'!=': { before: '', after: '' }）； v9及以下版本：格式化后使用字符串替换还原运算符（如/! =/g替换为!=）。 建议：优先使用标准运算符（如<>替代!=）以避免兼容性问题。
2025-12-17 14:30:41
312
原创 如何使用quill实现输入关键字联想及关键字高亮
本文介绍了如何使用Quill编辑器实现根据“{”符号触发联想功能，并对符合要求的关键字进行高亮显示。首先，通过npm install quill安装Quill库，并封装一个Vue组件quill.vue。组件中，handleTextChange方法监听用户输入，当检测到“{”符号时，显示选择框并设置其位置。applyMentionHighlight方法则使用Quill的formatText功能，对匹配{{}}格式的关键字进行高亮处理。最后，handleSelectChange方法用于将选中的关键字插入到编辑器
2025-05-23 16:32:41
300
原创 使用vue3+ts+antv X6实现流程图
本文介绍了如何使用AntV X6和Vue3实现一个可拖拽的节点编辑器。首先，通过Element Plus的Collapse组件实现左侧节点列表，支持点击或拖拽添加节点。接着，安装并配置AntV X6及其Vue3插件，定义节点类型和连接桩，使用register方法注册自定义节点。在Vue组件中，通过getTeleport方法初始化画布，并配置画布样式、网格、连接线等属性。最后，通过Graph类创建画布实例，并设置节点连接验证逻辑。代码示例和详细配置可参考提供的链接和文档。
2025-05-16 14:24:08
1440
原创 如何利用element plus中的树形控件搭配form表单实现多层级校验及拖拽
如何利用element plus中的树形控件搭配form表单实现多层级校验及拖拽
2025-04-30 17:29:07
347
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人