vue-codemirror在线编辑器高度以及字体样式的改变

如何修改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%的问题