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

基本用法

编辑JSON

<template>
    <yb-codemirror-json
        v-model="value"
        placeholder="请输入"
    ></yb-codemirror-json>
</template>
<script>
    export default {
        data() {
            return {
                value: `{ "bizdata": [], "message": "success", "retcode": "000000", "style": "PLAIN", "timestamp":1696993944552 }`,
            };
        },
    };
</script>

显示 复制 复制

可自适应文本高度

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

启用禁用

编辑JSON

<template>
    <el-switch
        v-model="disabled"
        active-text="禁用"
        inactive-text="启用"
        style="margin-bottom:10px"
    >
    </el-switch>
    <yb-codemirror-json
        v-model="value"
        :autosize="{ minRows: 6, maxRows: 12 }"
        placeholder="请输入语句"
        :disabled="disabled"
    >
    </yb-codemirror-json>
</template>
<script>
    export default {
        data() {
            return {
                disabled: false,
                value: `"{ "bizdata": [], "message": "success", "retcode": "000000", "style": "PLAIN", "timestamp":1696993944552 }"`,
            };
        },
    };
</script>

显示 复制 复制

在光标处插入内容

编辑JSON

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

YbCodemirrorJson Attributes

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string	--	--
showFormatBtn	显示格式化按钮	boolean	--	true
showCopyBtn	显示复制内容按钮	boolean	--	true
showLargerBtn	显示放大按钮	boolean	--	true
getJsonExtensions	可以取的 jsonLanguage 再返回 extensions	function(jsonLanguage){return extensions}	--	--
	其他属性同 YbCodemirror	--	--

YbCodemirrorJson Slots

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

YbCodemirrorJson Methods

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

YbCodemirrorJson Events

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