1.问题

想用codemirror做实时代码高亮，自定义了双向指令来使用它。定义为全局指令后可正常使用，定义为局部指令则css不正确（也许是js也有问题？）

2.代码

使用vue-cli的webpack模版建项目。codemirror通过npm安装。代码：

main.js

import Vue from 'vue'
import App from './App'

import CodeMirror from 'codemirror/lib/codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript'

Vue.directive('banzi', {
  twoWay: true,
  bind: function () {
    this.codemirror = CodeMirror(this.el, {
      mode: 'javascript',
      lineNumbers: true
    })
    this.codemirror.on('change', function () {
      this.set(this.codemirror.getValue())
    }.bind(this))
  },
  update: function (value, oldValue) {
    this.codemirror.setValue(value || '')
  }
})

/* eslint-disable no-new */
new Vue({
  el: 'body',
  data: {
    'neirong': 'function test() {}'
  },
  components: { App }
})

index.html

  



  
  
from app
   
  
  
from banzi
  

components/App.vue

3.截图

上面app那个是来自组件App.vue的结果，行号显示和代码冲突了，有overlap