2.0.4 • Published 3 years ago
monaco-sqlpad v2.0.4
monaco-sqlpad
基于微软vscode开源的monaco-editor的sql编辑器,支持SQL语法高亮、提示,支持表名、字段提示
示例
安装
npm i monaco-sqlpad --save
webpack配置
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
configureWebpack: {
plugins: [new CopyWebpackPlugin(
{
patterns: [
{
context: 'node_modules/monaco-sqlpad/dist/',
from: '*.umd.min.*.js',
to: 'js/',
toType: 'dir'
},
{
from: 'node_modules/monaco-sqlpad/dist/editor.worker.js',
to: 'editor.worker.js',
toType: 'file'
},
{
context: 'node_modules/monaco-sqlpad/dist/',
from: 'fonts',
to: 'js/fonts',
toType: 'dir'
}
]
}
)]
}
}
使用
<template>
<div style="height:500px">
<monaco-sqlpad v-model="content" :on-input-field="onInputField" :dbs="dbs" :width="500" :height="500" />
</div>
</template>
<script>
import MonacoSqlpad from 'monaco-sqlpad'
export default {
data() {
return {
content: null,
dbs: []
}
},
components: {
MonacoSqlpad
},
async mounted() {
// 初始化数据库及表信息用于编辑器提示数据库和表
this.dbs = await this.getDbList()
},
methods: {
/
* 当用户需要输入表字段时回调方法
* @return { Array } 表格字段数组
*/
async onInputField() {
const fields = await this.getTableCloumn()
return fields
},
/**
* 模拟异步获取数据库名&&表名
*/
getDbList() {
return new Promise((resolve, reject) => {
resolve([
{
dbName: 'db_bar',
tables: [
{
tblName: 'user',
tableColumns: [
{
fieldName: 'username'
}
]
},
{
tblName: 'log',
tableColumns: []
},
{
tblName: 'goods',
tableColumns: []
}
]
},
{
dbName: 'db_foo',
tables: [
{
tblName: 'price',
tableColumns: []
},
{
tblName: 'time',
tableColumns: []
},
{
tblName: 'updata_user',
tableColumns: []
}
]
}
])
})
},
/**
* 模拟异步获取表字段
*/
getTableCloumn() {
return new Promise((resolve, reject) => {
resolve(['username', 'password'])
})
}
}
}
</script>
future
future |
---|
单元测试 |
Event配置 |
Option配置 |
SQL解析优化 目前使用正则匹配表名和字段 |
2.0.4
3 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.49
4 years ago
1.0.48
4 years ago
1.0.47
4 years ago
1.0.46
4 years ago
1.0.45
4 years ago
1.0.44
4 years ago
1.0.43
4 years ago
1.0.42
4 years ago
1.0.39
4 years ago
1.0.38
4 years ago
1.0.41
4 years ago
1.0.26
4 years ago
1.0.25
4 years ago
1.0.29
4 years ago
1.0.28
4 years ago
1.0.27
4 years ago
1.0.33
4 years ago
1.0.32
4 years ago
1.0.31
4 years ago
1.0.30
4 years ago
1.0.37
4 years ago
1.0.36
4 years ago
1.0.35
4 years ago
1.0.34
4 years ago
1.0.24
4 years ago
1.0.23
4 years ago
1.0.22
4 years ago
1.0.21
4 years ago
1.0.20
4 years ago
1.0.19
4 years ago
1.0.18
4 years ago
1.0.17
4 years ago
1.0.16
4 years ago
1.0.15
4 years ago
1.0.14
4 years ago
1.0.13
4 years ago
1.0.9
4 years ago
1.0.11
4 years ago
1.0.10
4 years ago
1.0.12
4 years ago
1.0.8
4 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.3
4 years ago
1.0.2
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago