vue 中使用 codemirror 显示异常，直到点击才可以

加载后refresh()一下（原因据说是多个codemirror相互影响导致，但是我只有一个codemirror 的时候也出现这个问题）

setTimeout(() => {

self.$refs.cmExpressionsRef.codemirror.refresh()

},50)

 

控制光标位置

例如：在codemirror 绑定变量 this.formData.exp，在光标后加入item字符串到this.formData.exp

{{item}}

{{item}}

....................................................................

import { codemirror } from 'vue-codemirror'
import 'codemirror/mode/sql/sql.js'

export default {
  name: 'ExpressionsModal',
  components:{
    codemirror
  },
  props: {
    getExpressions: {
      type: Function
    }
  },
  data () {
    return {
      visibleModal: false,
      actionType: null,
      formData: {
        exp: ''
      },
      sqlKeycolumns: [],
      polymerization: ['sum', 'count', 'avg', 'max', 'min', 'distinct'], // sum(count(avg(max(min(distinct())))))
      targetDom: '',
      parIndex: -1,
      sqlEditor: null,
      cmOptions: {
        mode: 'text/x-mariadb',
        indentWithTabs: true,
        smartIndent: true,
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        cursorHeight:1, // 光标高度
        autoRefresh: true
      },
      curposition:{}
    }
  },
  mounted () {
  },
  methods: {
    handleChange () {
      this.$refs.cmExpressionsRef.codemirror.focus()
      this.$refs.cmExpressionsRef.codemirror.setCursor(2,1)
      this.$nextTick(()=> {
        this.$refs.cmExpressionsRef.codemirror.refresh();
      })
    },
    show (row, sqlKeycolumns, expressTree, actionType, parIndex) {
      this.visibleModal = true
      this.sqlKeycolumns = sqlKeycolumns
      this.actionType = actionType
      this.parIndex = parIndex
      this.targetDom = document.querySelector('#expressionInput textarea')
      const self = this
      setTimeout(() => {
          self.$refs.cmExpressionsRef.codemirror.refresh()
      },50)
      if (actionType === 'add') {
        this.formData = {exp: '', id: guid(), type: 'exp'}
      } else {
        this.formData = lodash.cloneDeep(row)
      }
      if (expressTree.length > 0) {
        this.formData.staticList = expressTree.map(item => ('${' + item.alias + '}'))
      }
    },
    sqlKeyClick (item) {
      this.$refs.cmExpressionsRef.codemirror.focus()
      const lastLine = this.$refs.cmExpressionsRef.codemirror.lastLine()// 最后一行序列编码
      const getLineContent = this.$refs.cmExpressionsRef.codemirror.getLine(lastLine) // 最后一行内容
      this.curposition = this.$refs.cmExpressionsRef.codemirror.getCursor()
      //光标前的str
      const beforeStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:0,ch:0} , {line:this.curposition.line,ch:this.curposition.ch})
      //光标后的str
      const afterStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:this.curposition.line,ch:this.curposition.ch} , {line:lastLine,ch:getLineContent.length})
      this.formData.exp = beforeStr + item + afterStr
      this.$nextTick(() =>{
        this.$refs.cmExpressionsRef.codemirror.setCursor(this.curposition.line,this.curposition.ch+item.length)
      })
    },
    polyItemClick (ev, item) {
      this.$refs.cmExpressionsRef.codemirror.focus()
      const lastLine = this.$refs.cmExpressionsRef.codemirror.lastLine()// 最后一行序列编码
      const getLineContent = this.$refs.cmExpressionsRef.codemirror.getLine(lastLine) // 最后一行内容
      this.curposition = this.$refs.cmExpressionsRef.codemirror.getCursor()
      //光标前的str
      const beforeStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:0,ch:0} , {line:this.curposition.line,ch:this.curposition.ch})
      //光标后的str
      const afterStr = this.$refs.cmExpressionsRef.codemirror.getRange({line:this.curposition.line,ch:this.curposition.ch} , {line:lastLine,ch:getLineContent.length})
      this.formData.exp = beforeStr + item + '()' + afterStr
      this.$nextTick(() =>{
        this.$refs.cmExpressionsRef.codemirror.setCursor(this.curposition.line,this.curposition.ch+item.length+1)
      })
    },
    onSubmit () {
      this.getExpressions(this.formData, this.actionType, this.parIndex)
    }
  }
}

 

官方api路径：

https://codemirror.net/doc/manual.html#api