# expressionEditor

**Repository Path**: zc16607/expression-editor

## Basic Information

- **Project Name**: expressionEditor
- **Description**: 表达式编辑器，变量编辑器，vue3组件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 0
- **Created**: 2024-08-28
- **Last Updated**: 2025-05-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# expressionEditor

### 介绍
表达式编辑器组件（变量编辑器组件）vue3组件


+ #### 原理
使用可编辑div实现编辑容器，拦截beforeInput事件，并实现自定义渲染  
vue技术栈，使用了vue3 + nuxt3 + elementPlus + vueuse + tsx语法
  

- #### 功能
1. 输入关键字{{}}触发高亮，点击后使用el-popover弹出框，变量选择使用el-tree展示  
2. 变量名正确和错误区分不同高亮颜色  
3. 支持触发el-form的表单校验  

**难点在于控制光标的位置，以及中文输入的处理**，代码参考了这个项目[Gramps.js](https://github.com/DavidMStraub/Gramps.js/blob/58ab232614da9339c6393a0d4aca80f854038d82/src/components/GrampsjsEditor.js#L200)  
*ps: 使用了零宽度空格(\​)在真实dom中代替换行符\n，两者都占一个字符*

- #### 使用示例
``` vue
<el-form-item prop="template" :rules="formRules.template">
    <expression-editor v-model="state.template" :maxlength="2000" placeholder="请输入模板内容，可通过{{}}使用变量" :tree-data="state.input"></expression-editor>
</el-form-item>
```

- #### 截图参考
![初始状态](./image/expressEditor.png "初始状态")  
![空值校验](./image/expressEditor1.png "空值校验")  
![变量输入](./image/expressEditor2.png "变量输入和不存在变量的效果")