第六篇 VUE使用CodeMirror 实现sql 等脚本的录入

该篇写的是 CodeMirror 的简单使用，对于平时的开发使用足够了。

页面效果如下：

更多的配置项可参照在线手册：

在线使用手册：https://codemirror.net/doc/manual.html
github地址：https://github.com/marijnh/codemirror

使用方法：

1. npm 安装 vue-codemirror

npm install vue-codemirror --save

2.简单使用的 demo

可引入主题类型、可引入脚本类型

import 'codemirror/theme/cobalt.css' // 主题3

import 'codemirror/mode/javascript/javascript.js' // 指定为 javascript 脚本

3. 使用代码如下：

<template>
  <div class="code-mirror">
    <codemirror
      ref="chartOption"
      :value="mirrorCode"
      v-model="form.script"
      :options="cmOptions"
      @change="mirrorCodeChange"
    >
    </codemirror>
    <el-button @click="getdata">Test get sql</el-button>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css' // 基本样式
import 'codemirror/theme/ambiance.css' // 主题1 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
import 'codemirror/theme/base16-light.css' // 主题2
import 'codemirror/theme/cobalt.css' // 主题3

// import 'codemirror/mode/javascript/javascript.js' // 指定为 javascript 脚本
import 'codemirror/mode/sql/sql.js' // 指定为 sql 脚本
export default {
  name: 'basic-line-configs',
  components: {
    codemirror
  },
  data() {
    return {
      mirrorCode: '',
      cmOptions: {
        value: 'select * from test', //编辑器的初始值（文本）
        mode: 'text/javascript', //以什么格式进行代码高亮
        theme: 'cobalt', // ambiance, foo bar, darcula //配置编辑器的主题样式
        indentUnit: 4, //缩进单位
        smartIndent: true, // 自动缩进
        tabSize: 2, //tab字符的宽度
        lineNumbers: true, // 是否显示行
        firstLineNumber: 1, //第一行的行号
        showCursorWhenSelecting: true, // 在选择时是否显示光标
        readOnly: false, //是否只读,不能获取焦点
        cursorHeight: 1,
        autoRefresh: true,
        styleActionLine: true
      },
      form: {
        script: ''
      }
    }
  },
  methods: {
    mirrorCodeChange(data) {
      console.log('code data', data)
    },
    getdata() {
      console.log('data', this.form)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.code-mirror {
  .CodeMirror-line {
    font-size: 16px;
  }
  .CodeMirror-linenumber {
    font-size: 16px;
  }
}
</style>

4. 谢谢支持，一起学习一起进步！！