index.vue 3.02 KB
Newer Older
wangdanlei's avatar
wangdanlei 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 128
<template>
  <div class="dee-code-edit-com">
    <textarea ref="mycode" v-model="textarea" class="textarea" />
  </div>
</template>

<script>
import 'codemirror/lib/codemirror.css'
// load model
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/javascript/javascript'
// load codetip
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint'
import 'codemirror/theme/3024-night.css'
import 'codemirror/mode/clike/clike.js'

const CodeMirror = require('codemirror')
require('codemirror/addon/edit/matchbrackets')
require('codemirror/addon/selection/active-line')
require('codemirror/mode/javascript/javascript')
require('codemirror/addon/hint/show-hint')
require('codemirror/keymap/sublime.js')
require('codemirror/addon/selection/active-line.js')
require('codemirror/addon/edit/matchbrackets.js')
require('codemirror/addon/display/autorefresh.js')
export default {
  name: 'DeeCodeEdit',
  components: { },
  props: {
    value: {
      type: String,
      default: () => ''
    },
    mode: {
      type: String,
      default: () => 'javascript'
    }
  },
  data() {
    return {
      textarea: '',
      code: '',
      editorText: '',
      cmOptions: {

      }
    }
  },
  watch: {
    value: {
      handler: function(val) {
        if (val !== this.code) { this.setValue(val) }
      },
      immediate: true

    }
  },
  mounted() {
    this.editorText = CodeMirror.fromTextArea(this.$refs.mycode, {
      mode: { name: this.mode, globalVars: true },
      theme: '3024-night',
      indentWithTabs: true,
      smartIndent: true,
      lineNumbers: true,
      matchBrackets: true,
      autoRefresh: true,
      extraKeys: { Ctrl: 'autocomplete' }, // 自定义快捷键
      hintOptions: {
        // 自定义提示选项
        tables: {
          users: ['name', 'score', 'birthDate'],
          countries: ['name', 'population', 'size']
        }
      }
    })
    this.$nextTick(() => {
      this.editorText.setValue(this.value)
      this.refresh()
    })

    // 可选,挂载一下监听事项
    this.editorText.on('change', (cm) => {
      this.code = cm.getValue() // 这里要用多一个载体去获取值,不然会重复赋值卡顿
      this.$emit('input', cm.getValue())
    })
  },
  methods: {
    debounce(func, wait = 0) {
      if (typeof func !== 'function') {
        throw new TypeError('need a function arguments')
      }
      let timeid = null
      let result

      return function() {
        const context = this
        const args = arguments

        if (timeid) {
          clearTimeout(timeid)
        }
        timeid = setTimeout(function() {
          result = func.apply(context, args)
        }, wait)

        return result
      }
    },
    refresh() {
      this.$nextTick(() => {
        this.editorText.refresh()
      })
    },
    setValue(value) {
      if (this.editorText && this.editorText.setValue) {
        this.editorText.setValue(value)
        this.refresh()
      }
    }
  }
}
</script>
<style lang="scss" >
  .dee-code-edit-com{
    line-height: 15px
  }
</style>