一、封装code.vue
<template>
<div class="am-code">
<codemirror ref="codeRef" v-model:value="cmCode" :options="cmOptions" :electricChars="false" @ready="onCmReady" class="mirror" :style="cmHeight"></codemirror>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, onUpdated, watch, nextTick, computed } from 'vue'
import Codemirror from 'codemirror-editor-vue3'
import 'codemirror/addon/display/autorefresh.js' // 显示自动刷新
import 'codemirror/addon/lint/json-lint.js'
import 'codemirror/addon/lint/lint.js'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/selection/active-line.js' //高亮行功能
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/sql/sql.js' //语言模式
import 'codemirror/theme/cobalt.css' //主题
import 'codemirror/theme/rubyblue.css'
export default defineComponent({
name: 'AmCode',
components: { Codemirror },
props: {
code: {
type: String,
default: ''
},
theme: {
type: String,
default: 'cobalt' //cobalt黑色背景 idea白色背景 dracula透明
},
height: {
type: String,
default: '100px'
},
},
// emits: ['onCmReady'],
setup(props, { emit }) {
const codeRef = ref()
const cmCode = ref(props.code)
const cmTheme = ref(props.theme)
const cmOptions = {
mode: 'text/x-mysql',
theme: cmTheme.value,
styleActiveLine: true,
autoRefresh: true,
lint: true,
// gutters: ['CodeMirror-lint-markers'],
lineNumbers: true,
indentWithTabs: true,
smartIndent: true,
// 软换行
lineWrapping: true,
// 自动括号匹配功能
matchBrackets: true,
// tab宽度
tabSize: 2
}
const onCmReady = (params: any) => {
emit('onCmReady', params)
}
const codeRefresh = () => {
codeRef.value.cminstance.refresh()
}
onMounted(() => {
codeRefresh()
})
onUpdated(() => {
emit('update:code', cmCode)
})
const cmHeight = computed(() => {
return {'--code-height': props.height}
})
return { cmCode, cmTheme, cmOptions, codeRef, onCmReady, codeRefresh, cmHeight}
}
})
</script>
<style scoped lang="scss">
.am-code {
width: 100%;
display: contents;
overflow: auto !important;
.mirror {
resize: vertical;
overflow: auto !important;
}
.codemirror-container{
height: var(--code-height);
}
}
</style>
二、导出组件文件index.ts
import { App } from 'vue'
import Code from './src/code.vue'
// 定义 install 方法, App 作为参数
const install = (app: App): void => {
app.component(Code.name, Code)
}
export default { install }
三、使用
<am-code v-model:code="dataForm.executeSql" height="120px"></am-code>
四、踩坑
一个项目中同时存在codeMirror与富文本编辑器时,先加载富文本编辑器后使用codeMirror时,codeMirror样式会受影响,因为富文本编辑器中也存在codemirror.css,