code.vue 3.4 KB
Newer Older
llz's avatar
llz committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127
<template>
  <el-dialog title="代码编辑"
             :visible.sync="visible"
             @close="code=''"
             :before-close="handleClose"
             width="60%">
    <textarea :ref="id"
              v-model="code"
              style="height:300px;width:100%;"></textarea>
    <span slot="footer"
          class="dialog-footer">
      <el-button size="small"
                 @click="setVisible(false)">取 消</el-button>
      <el-button type="primary"
                 @click="submit"
                 size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import "codemirror/theme/blackboard.css";
import "codemirror/lib/codemirror.css";
import "codemirror/addon/hint/show-hint.css";

let CodeMirror = require("codemirror/lib/codemirror");
require("codemirror/addon/edit/matchbrackets");
require("codemirror/addon/selection/active-line");
require("codemirror/addon/hint/show-hint");
export default {
  name: "codeMirror",
  data () {
    return {
      id: Math.floor(Math.random() * 100),
      editor: {},
      create: false,
      code: ''
    }
  },
  props: {
    visible: Boolean,
    type: String,
    value: {
      type: [String, Object, Array],
      default: ''
    }
  },
  watch: {
    visible (val) {
      if (val & !this.create) {
        this.create = true;
        this.$nextTick(() => {
          this.init();
          this.setValue(this.code);
        })
      }
    },
    value: {
      handler (val) {
        if (['object', 'array'].includes(typeof val)) {
          this.code = JSON.stringify(this.value, null, 4);
        } else {
          this.code = val;
        }
        this.$nextTick(() => {
          this.setValue(this.code);
        })

      },
      deep: true,
    },
  },
  methods: {
    handleClose () {
      this.setVisible(false);
    },
    submit () {
      let value = this.getValue();
      if (this.validatenull(value)) {
        value = '{}'
      }
      try {
        if (['query', 'data'].includes(this.type)) {
          value = JSON.parse(value, null, 4)
        }
        this.$emit('submit', value);
        this.setVisible(false)
      } catch (error) {
        this.$message.error('数据格式有误')
      }
    },
    getValue () {
      return this.editor.getValue()
    },
    setVisible (val) {
      this.$emit('update:visible', val);
    },
    setValue (val = '') {
      if (this.editor) this.editor.setValue(val);
    },
    init () {
      let mime = 'text/javascript'
      let theme = 'blackboard'//设置主题,不设置的会使用默认主题
      this.editor = CodeMirror.fromTextArea(this.$refs[this.id], {
        mode: mime,//选择对应代码编辑器的语言,我这边选的是数据库,根据个人情况自行设置即可
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets: true,
        theme: theme,
        // autofocus: true,
        extraKeys: { 'Ctrl': 'autocomplete' },//自定义快捷键
        // hintOptions: {//自定义提示选项
        //   tables: {
        //     users: ['name', 'score', 'birthDate'],
        //     countries: ['name', 'population', 'size']
        //   }
        // }
      })
      //代码自动提示功能,记住使用cursorActivity事件不要使用change事件,这是一个坑,那样页面直接会卡死
      this.editor.on('cursorActivity', () => {
        this.editor.showHint()
      })
    }
  }
}
</script>