背景:
最近帮领导做个工具,要在vue3的项目里开发。
在表单里提供富文本编辑器来输入sql语句。
第一个踩雷的点就是我不知道下载哪个插件比较好,就搜索了一下“vue 富文本编辑器”,给我推荐了vue-quill-editor,我就去下载并引用了,捯饬半天出不来。最后发现
我是vue3项目,人家不支持啊。哎,有时候真觉得自己上班上的好蠢。
最后我下载了vue-codemirrorGitHub - surmon-china/vue-codemirror: @codemirror code editor component for @vuejs
使用:
1、安装
npm install codemirror vue-codemirror --save
npm i @codemirror/lang-sql
npm i @codemirror/theme-one-dark
2、引用&&注册
import { Codemirror } from 'vue-codemirror'
import { sql } from "@codemirror/lang-sql";
import { oneDark } from "@codemirror/theme-one-dark";
components: {
Codemirror,
},
3、代码部分
<el-form-item label="查询SQL" :prop="`dataTaskConfigList.${index}.configSql`" :rules="rules.configSql" style="margin-top: 20px;">
<codemirror v-model="item.configSql"
placeholder="Code goes here..."
ref="mycodemirror"
:style="{ width: '100%', height: '480px' }"
:autofocus="true"
:extensions="extensions"
:indent-with-tab="true"
@blur="handleBlur($event,item)"
:tab-size="2"/>
</el-form-item>
data() {
return {
extensions: [sql(),oneDark],
}
}
blur事件是我的业务处理逻辑,需要将输入的sql语句中以@开始和结束的参数提取出来并去重,处理成一个数组对象的键值对形式。
handleBlur(e,item) {
if(!item.configSql) {
item.sqlParamList = []
return
}
const regex = /@[^@]+@/g;
let tempData = Array.from(new Set(item.configSql.match(regex))); //去重且匹配
let sqlParamList = tempData.map(val => {
return {
key: val,
value: dayjs().format('YYYY-MM-DD')
}
})
item.sqlParamList = JSON.parse(JSON.stringify(sqlParamList))
},
4、实现效果