vue-codemirror的显示框自适应问题（解决）

vue-codemirror的显示框自适应问题（解决）

刚刚使用vue-codemirror做代码编辑器使用，想要显示框可以根据代码来自适应高度，官网提供的例子无效，样式修改b不了，即使给了 important 级别；

.CodeMirror {
   height: auto !important;
}

解决方法

设置ref属性

<codemirror ref="myCmGenerate" v-model="code" :options="cmOptions"></codemirror>

通过refs去设置自适应的宽高，主要外层的div设置

mounted(){
	this.$refs.myCmGenerate.codemirror.setSize("auto", "auto")
}

全部代码

<template>
  <codemirror ref="myCmGenerate" v-model="code" :options="cmOptions"></codemirror>
</template>
<script>
import {codemirror} from 'vue-codemirror'
import "codemirror/mode/vue/vue.js" // mode模式
import "codemirror/mode/javascript/javascript"// mode模式
import 'codemirror/addon/selection/active-line' //addon插件,光标行背景高亮，配置里面也需要styleActiveLine设置为true
import 'codemirror/addon/edit/matchbrackets'
// 主题样式theme
import "codemirror/theme/railscasts.css";
import "codemirror/theme/dracula.css";
import "codemirror/addon/hint/show-hint.css";

export default{
  components: {
    codemirror
  },
  props:['codes','modes'],
  data(){
    return{
      editor: null,
      code:this.codes,
      cmOptions: {
          tabSize: 4,// tab的空格个数
          theme: 'railscasts',//主题样式
          mode: this.modes, //模式 
          lineNumbers: true,//是否显示行数
          lineWrapping: true, //是否自动换行
          styleActiveLine: true,//line选择是是否加亮
          matchBrackets: true,//括号匹配
          readOnly: false,//只读
          scrollbarStyle: null, //隐藏滚动条
          // viewportMargin:'Infinity', //注意：设置属性有可能导致卡死
      }

    }
  },
  mounted(){
    this.$refs.myCmGenerate.codemirror.setSize("auto", "auto")
  },
  
}
</script>