el-input和codemirror结合显示行号

在Vue.js中，`el-input`是一个基础的输入框组件，而`codemirror`则是一个强大的富文本编辑器，常用于编写代码的场景，它默认包含行号功能。将这两个组件结合起来，你可以创建一个既能输入文本又能展示代码格式，并且有行号的实时反馈的输入框。

首先，你需要安装`element-ui`和`codemirror`库，可以通过npm或yarn添加依赖：

npm install element-ui codemirror @vue/codemirror-component

然后，在Vue组件中，可以这样做：

<template>
  <div>
    <el-input v-model="code" :ref="inputRef"></el-input>
    <div class="code-mirror">
      <codemirror :value="code" :options="mirrorOptions" />
    </div>
  </div>
</template>

<script>
import { CodeMirrorComponent } from '@vue/codemirror-component'
import 'codemirror/mode/javascript/javascript'

export default {
  components: {
    CodeMirrorComponent
  },
  data() {
    return {
      code: '',
      inputRef: null,
      mirrorOptions: {
        mode: 'javascript',
        lineNumbers: true, // 显示行号
        lineWrapping: true, // 自动换行
      }
    }
  },
  mounted() {
    this.inputRef.codemirror = CodeMirror(this.$refs.inputRef.$el, this.mirrorOptions)
  },
  watch: {
    code(newCode) {
      this.inputRef.codemirror.setValue(newCode) // 更新输入框内容的同时更新CodeMirror实例
    }
  }
}
</script>

<style scoped>
.code-mirror {
  margin-top: 10px;
  border: 1px solid #ccc;
  padding: 10px;
}
</style>