vue-codemirror使用

安装

npm i vue-codemirror -S

基础使用

  1. 引入
    在需要的vue单页中
import {
     codemirror } from 'vue-codemirror' // 引入组件
import 'codemirror/lib/codemirror.css'

export default {
     
    name: "basic-line-configs",
    components:{
     
      codemirror // 声明组件
    },
}

全局引入,在main.js中

import VueCodeMirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodeMirror)
  1. 使用
<codemirror
      ref="chartOption"
      :value="mirrorCode"
      :options="cmOptions" 
      @change="mirrorCodeChange">
</codemirror>
 // :value 的值为字符串
 // :option 为codemirror配置
  import {
     codemirror } from 'vue-codemirror'
  import 'codemirror/lib/codemirror.css'
  import 'codemirror/theme/base16-light.css'

  import 'codemirror/mode/javascript/javascript.js' //
  export default {
     
    name: "basic-line-configs",
    components:{
     
      codemirror
    },
    data() {
     
      return {
     
        mirrorCode:'',
        cmOptions: {
     
          tabSize: 2, // Tab键空格数
          mode: 'application/json', //模式
          theme: 'base16-light', // 主题
          lineNumbers: true, //是否显示行号
          line: true,
        },
      }
    },
  }

参数配置

readOnly: boolean|string 。true只读, “nocursor”,那么除了设置只读外,编辑区域还不能获得焦点。

theme: string。 引入相应主题的css,再在配置项中指定

import 'codemirror/theme/ayu-dark.css'
import 'codemirror/theme/blackboard.css'
import 'codemirror/theme/monokai.css'

高度自适应

.CodeMirror {
     
	border: 1px solid #eee;
    height: auto;
}
.CodeMirror-scroll {
     
	height: auto;
	overflow-y: hidden;
	overflow-x: auto;
}

你可能感兴趣的:(vue)