如何修改code-mirror在线编辑器里字体的高度
在解决项目的bug时,leader说当前页面的高度和项目其他模块的不一致,让我修改成一致的高度,那这只能按照他的要求来了,按照网上查找的资料,解决了这个问题,简单记录下,也许以后可能用的上
页面未修改高度时的代码如下所示
<template>
<div class="code">
<codemirror ref="codeMirrorRef"
v-model="serviceObject"
:options="cmOption">
</codemirror>
</div>
</template>
<script>
import "codemirror/theme/cobalt.css";
import "codemirror/addon/selection/active-line.js";
export default {
isEdit: {
type: Boolean,
default: false
},
},
data() {
return {
cmOption: {
value: '', // 初始内容
mode: 'javascript', //实现Java代码高亮
tabSize: 4, // tab的空格宽度
styleActiveLine: true, // 设置光标所在行高亮true/false
lineNumbers: true, //显示行号
theme: "cobalt", //设置主题
// json: true,
readOnly: true, // 设置为只读true/false;也可设置为"nocursor"失去焦点
// lineWrapping: true
},
serviceObject: ''
}
},
}
</script>
<style scoped lang="scss">
.code {
margin-bottom: 8px;
}
</style>
未修改高度时的页面
页面修改后的代码如下所示
最快的解决方式就是查看项目的源代码,看清楚是哪个类影响样式,修改对应类的代码,因为CodeMirror是封装的外部类,不加/deep/样式可能样式不会生效,加入/deep/能够深度穿透
<style scoped lang="scss">
.code {
margin-bottom: 8px;
line-height: 23px;
}
/deep/ .CodeMirror{
height: 200px;
font-family: Consolas, "Courier New", monospace;
font-weight: normal;
font-size: 14px;
line-height: 19px;
letter-spacing: 0px;
}
</style>
修改高度后的页面
以上修改高度的方式只针对于本项目,如果自己的项目需要更改,应根据实际情况修改对应的部分,如果样式修改不生效,尝试加上/deep/ 能够解决80%的问题