对@codemirror (opens new window)的二次封装，基于 @codemirror@6 的新版本，用于 vue 的代码编辑器组件。

基本用法

YbCodemirror 默认不带任何代码语言扩展，如需要请通过安装 @codemirror/lang-xxx 并通过 extensions props 传入。

<template>
    <yb-codemirror v-model="value" placeholder="请输入SQL语句"></yb-codemirror>
</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>

显示 复制 复制

固定布局高度

<template>
    <yb-codemirror
        style="height:200px"
        v-model="value"
        placeholder="请输入SQL语句"
    ></yb-codemirror>
    <div style="height:300px;margin-top:10px;">
        <yb-codemirror
            style="height:100%"
            v-model="value"
            placeholder="请输入SQL语句"
        ></yb-codemirror>
    </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 属性，指定最小行数和最大行数，可以使得编辑器的高度能够根据内容自动进行调整。

启用禁用

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

显示 复制 复制

在光标处插入内容

<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
            v-model="value"
            placeholder="请输入内容"
            :disabled="disabled"
            ref="codemirror"
            style="height:200px"
        >
        </yb-codemirror>
    </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)，实现更多复杂的操作功能

YbCodemirror Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string	--	--
customStyle	自定义样式	object	--	--
autosize	自适应内容高度，如，{ minRows: 2, maxRows: 6 }	object	--	--
extensions	编辑器语言扩展，传递给 CodeMirror EditorState.create({ extensions })	array | object	--	--
selection	传递给 CodeMirror EditorState.create({ selection }) 属性	object	--	--
root	传递给 CodeMirror new EditorView({ root }) 属性	object	--	--
tabSize	指定按下 Tab 键时的缩进	number	--	4
placeholder	内容为空时显示的提示	string	--	--
indentWithTab	绑定键盘 Tab 键事件	boolean	--	true
disabled	禁用	boolean	--	false

YbCodemirror Slots

name	说明
default	--

YbCodemirror Methods

方法名称	说明	参数	返回值
getEditorView	获取 codemirror 的视图实例	-	-
focus	聚焦	-	-
insertDocToCursor	在光标处插入内容 ,参数说明：doc:要插入的内容，getSelection:可以自定义光标位置	insertDocToCursor(doc:string,getSelection:function({view,doc}{return {anchor:Number, head: Number}}))	-

YbCodemirror Events

方法名称	说明	参数	返回值
focus	当 YbCodemirror 聚焦时	function(view){}	-
blur	当 YbCodemirror 失焦时	function(view){}	-
update	当 YbCodemirror 的任何状态发生变化时	function(view){}	-
selection	当文档内容被选中时	function(selectString,view){}	-
change	当文档内容变化时	function(docString,view){}	-