在 yb-codemirror 基础上使用 sql 语言，并且内置格式化 sql 按钮

lang 属性内部对应 是 @codemirror/lang-sql 中的 dialect：

{
SQL: StandardSQL,
MYSQL: MySQL,
POSTGRESQL: PostgreSQL,
STARROCKS: StandardSQL,
DORIS: StandardSQL,
CLICKHOUSE: StandardSQL,
ORACLE: StandardSQL,
SQLSERVER: StandardSQL,
DB2: StandardSQL,
VERTICA: StandardSQL,
}

基本用法

编辑SQL

<template>
    <yb-codemirror-sql
        v-model="value"
        lang="POSTGRESQL"
        placeholder="请输入SQL语句"
    ></yb-codemirror-sql>
</template>
<script>
    export default {
        data() {
            return {
                value: "select * from system_schema.tables where keyspace_name = 'system_schema' and table_name = 'tables';",
            };
        },
    };
</script>

显示 复制 复制

固定布局高度

编辑SQL

编辑SQL

<template>
    <yb-codemirror-sql
        style="height:200px"
        v-model="value"
        placeholder="请输入SQL语句"
    ></yb-codemirror-sql>
    <div style="height:300px;margin-top:10px;">
        <yb-codemirror-sql
            style="height:100%"
            v-model="value"
            placeholder="请输入SQL语句"
        ></yb-codemirror-sql>
    </div>
</template>
<script>
    // import { sql } from '@codemirror/lang-sql';
    export default {
        data() {
            return {
                // extensions:[sql()],
                value: "select * from system_schema.tables where keyspace_name = 'system_schema' and table_name = 'tables';",
            };
        },
    };
</script>

显示 复制 复制

可自适应文本高度

通过设置 autosize 属性，指定最小行数和最大行数，可以使得编辑器的高度能够根据内容自动进行调整， 通过 disabled 属性切换编辑器是否可以编辑。

启用禁用

编辑SQL

<template>
    <el-switch
        v-model="disabled"
        active-text="禁用"
        inactive-text="启用"
        style="margin-bottom:10px"
    >
    </el-switch>
    <yb-codemirror-sql
        v-model="value"
        :autosize="{ minRows: 6, maxRows: 12 }"
        placeholder="请输入SQL语句"
        :disabled="disabled"
    >
    </yb-codemirror-sql>
</template>
<script>
    export default {
        data() {
            return {
                disabled: false,
                value: "select * from system_schema.tables where keyspace_name = 'system_schema' and table_name = 'tables';",
            };
        },
    };
</script>

显示 复制 复制

在光标处插入内容

编辑SQL

<template>
    <div>
        <div style="margin-bottom:10px">
            <el-button size="mini" @click="insertContent"
                >插入"select * from a"</el-button
            >
            <el-button size="mini" @click="insertSum"
                >插入"sum()"并将光标聚焦在括号内</el-button
            >
        </div>
        <yb-codemirror-sql
            v-model="value"
            placeholder="请输入内容"
            :disabled="disabled"
            ref="codemirror"
            style="height:200px"
        >
        </yb-codemirror-sql>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                disabled: false,
                value: "select * from system_schema.tables where keyspace_name = 'system_schema' and table_name = 'tables';",
            };
        },
        methods: {
            insertContent() {
                this.$refs['codemirror'].insertDocToCursor('\nselect * from a');
            },
            insertSum() {
                this.$refs['codemirror'].insertDocToCursor(
                    'sum()',
                    ({ view, doc }) => {
                        return {
                            anchor:
                                view.state.selection.main.from + doc.length - 1,
                            head:
                                view.state.selection.main.from + doc.length - 1,
                        };
                    }
                );
            },
        },
    };
</script>

显示 复制 复制

通过 this.$refs['codemirror'].getEditorView()获取到编辑器实例以及 extensions 扩展属性，查看codemirror 的文档 (opens new window)，实现更多复杂的操作功能

使用 getSqlExtensions 增强编辑器语法提示

编辑SQL

<template>
    <yb-codemirror-sql
        v-model="value"
        placeholder="请输入内容"
        :disabled="disabled"
        ref="codemirror"
        :getSqlExtensions="getSqlExtensions"
        style="height:200px"
    >
    </yb-codemirror-sql>
</template>
<script>
    export default {
        data() {
            return {
                disabled: false,
                value: "select * from system_schema.tables where keyspace_name = 'system_schema' and table_name = 'tables';",
            };
        },
        methods: {
            // 提供编辑器扩展
            getSqlExtensions(dialect) {
                const extensionCustomCodeTip = dialect.language.data.of({
                    autocomplete: this.sqlCompletions,
                });

                return [extensionCustomCodeTip];
            },
            sqlCompletions(context) {
                let word = context.matchBefore(/\w*/);
                if (word.from == word.to && !context.explicit) return null;
                return {
                    from: word.from,
                    options: [
                        { label: '广州医博信息技术有限公司', type: 'keyword' },
                        { label: '广州医博', type: 'variable', info: 'yibo' },
                        {
                            label: 'yibo',
                            type: 'text',
                            apply: '广州医博信息技术有限公司',
                            detail: 'macro',
                        },
                    ],
                };
            },
        },
    };
</script>

显示 复制 复制

YbCodemirrorSql Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string	--	--
lang	SQL 语言的类型	string	--	SQL
showFormatBtn	显示格式化按钮	boolean	--	true
showCopyBtn	显示复制内容按钮	boolean	--	true
showLargerBtn	显示放大按钮	boolean	--	true
getSqlExtensions	可以取的 languageDialects 再返回 extensions	function(languageDialects){return extensions}	--	--
sqlFormatterConfig	sql-formatter (opens new window) 的扩展参数配置	Object	--	{}
sqlConfig	@codemirror/lang-sql (opens new window) 的扩展参数配置	Object	--	{}
languageDialects	对应 lang 属性的 Dialects 映射，可以扩展	Object	--	{ SQL: StandardSQL, MYSQL: MySQL, POSTGRESQL: PostgreSQL, STARROCKS: StandardSQL, DORIS: StandardSQL, CLICKHOUSE: StandardSQL, ORACLE: StandardSQL,SQLSERVER: StandardSQL,DB2: StandardSQL,VERTICA: StandardSQL,}
	其他属性同 YbCodemirror	--	--

YbCodemirrorSql Slots

name	说明	参数
prependBtns	在内置按钮的之前插入内容
appendBtns	在内置按钮的之后插入内容
largerArea	放大弹窗内容

YbCodemirrorSql Methods

方法名称	说明	参数	返回值
updateExtensions	有可能 getSqlExtensions 内的引用参数改变了不会自动触发更新 extensions , 需要调用 updateExtensions	--
	其他属性同 YbCodemirror	--

YbCodemirrorSql Events

方法名称	说明	参数	返回值
	其他属性同 YbCodemirror	--	--