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>