一个“非常简单”的Vue表达式编辑组件

本文介绍了为满足特定业务需求,内部开发的一个简单Vue表达式编辑组件。组件支持外部配置备选元素、数学计算、逻辑运算、括号匹配等功能,并详细阐述了模拟输入框光标控制、备选项面板的设计与实现。此外,总结了组件的核心逻辑,指出可以通过Vue的作用域插槽扩展更多自定义功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

嗯,,,又是一个公司的需求产生的想法😓😓

为了配合后端使用的规则引擎,实现事件自动上报、状态自动更新等功能,需要在后台管理的页面上增加一个规则配置模块,其中涉及到设备属性、事件、自定义参数、且或非逻辑运算等多种配置元素。在外面找了一下没有找到符合界面设计和操作方式的开源库/组件,所以内部自己根据需求实现了一个简单的表达式编辑组件。

先上效果:

1. 需求

在经过多次讨论(撕逼)之后,与产品和后端讨论出来了以下需求:

  • 支持外部配置表达式备选元素
  • 支持加减乘除等简单数学计算
  • 支持选择且或非、大小于之类的逻辑运算
  • 支持自定义文本、数字输入
  • 支持括号、验证括号匹配

看到括号匹配是不是就想到力扣的括号匹配算法了?😏

2. 设计

为了满足从外部配置新的表达式备选元素,所以肯定需要接收一个备选元素数组,并约定好特定格式;而且,为了方便用户选择,还需要单独将这一类选项进行划分。

另外的自定义文本、数字,则需要能实现表达式直接输入和更改(类似双向绑定吧),可以直观的在生成的表达式中直接输入最好。

其他的部分则可以看做是内置的特殊选项,我们一一配置即可。

当然,为了优化用户体验,方便寻找需要的表达式元素,我们对所有的备选项进行了分组:

1.扩展选项列:用来填充上级组件传递进来的选项
2.运算符:包含加减乘除和百分比
3.逻辑符:包含且或非,大于小于等于、大于等于、小于等于和不等于
4.特殊项:括号、文本、数字,以及一个缺省项

并且表达式需要只是用户可读和代码可读两种情况,就需要增加每个选项对应的 label 和 value 字段了。

3. 代码

在设计完成之后,就是写代码的时候了。因为代码比较多,这里只介绍几个核心部分:

3.1 模拟输入框光标与键盘控制

因为每个选项的显示元素宽度不一样,所以模拟的光标肯定不能放在最外层(当然给最外层加也能实现,但是会多很多不必要的尺寸计算)。所以我们的方案是将光标放置在已选的表单项上面,通过设置激活状态和伪类来实现。

整个 Dom 结构如下:

其中红色部分是整个已选选项的显示和编辑区域,黄色选项为当前激活项,蓝色区域为表达式的 “用户可读” 预览。

上面的已选表单项也通过一个数组来存储&#

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值