1.0.1 • Published 2 years ago
monaco-plus v1.0.1
已实现功能
- 封装组件安装的webpack插件,方便引用
- 支持sql语言的库、表、字段提示功能
- 支持sql语言格式化功能
- 支持错误提示
使用步骤
// 安装
npm i monaco-plus
// 引用1
import monacoPlus from 'monaco-plus'
Vue.use(monacoPlus)
or
// 引用2
import {monacoPlus} from 'monaco-plus'
export default {
components: {
"monaco-plus": monacoPlus,
},
...
}
// 使用
<monaco-plus
class="editor"
ref="editorRef"
:options="{ value: sqlStr }"
></monaco-plus>
自定义参数
// 注:其中options参数为monaco原生配置参数
// options中加入自定义配置如下:
options: {
sqlFuns: {
getDBNames, // 数据库名字
getTableNamesByDBName, // 获取数据表
getColumnNamesByTableName, // 获取字段名
getMarkers, // 错误提示 其中
}, // 自定义sql提示的回调函数
isSql: true, // 自定义sql提示开关
}
type Marker = {
startLineNumber: 1, // 开始的行号,注:行号列号都从1开始
startColumn: 1, // 开始的列号
endLineNumber: 1, // 结束的行号
endColumn: 5, // 结束的列号
message: "拼写错误", // 错误信息
severity: monaco.MarkerSeverity.Error, // 错误级别枚举值
}
方法名 | 入参 | 出参 | 说明 |
---|---|---|---|
getDBNames | - | ArrayString 数据库名字的数组 | 数据库名字 |
getTableNamesByDBName | dbName:String 数据库名字 | ArrayString 数据表名字的数组 | 根据库名获取数据表 |
getColumnNamesByTableName | tableName:String 数据表名字 | ArrayString 字段名字的数组 | 根据表名获取字段名 |
getMarkers | sqlStr:String sql的每行的数据通过\n拼串 | ArrayMarker Marker类型的数组 | 错误提示 |