vue 中 mavon-editor 添加代码行数完整的示例代码

好的，下面是在 Vue 中使用 mavon-editor 添加代码行数的完整示例代码：

<template>
  <div>
    <mavon-editor v-model="content" :defaultOpen="true" :subfield="true" :lineNumbers="true"></mavon-editor>
  </div>
</template>

<script>
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'

export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      content: ''
    }
  }
}
</script>

<style scoped>
.markdown-body .code-toolbar {
  padding-right: 70px;
}
.markdown-body pre {
  counter-reset: linenumber;
}
.markdown-body pre code {
  position: relative;
}
.markdown-body pre code:before {
  content: counter(linenumber);
  counter-increment: linenumber;
  position: absolute;
  left: -2.5em;
  text-align: right;
  width: 2em;
  color: #999;
}
</style>

在这个示例中，我们先在 `<mavon-editor>` 组件中添加 `:lineNumbers="true"`，这将启用代码行数显示。然后，我们在样式文件中添加了一些 CSS 样式，用于添加行数。最后，我们将 mavon-editor 引入到组件中，并使用 v-model 指令绑定内容。

请注意，以上代码中的样式是基于 markdown-body 样式库的。如果您使用的是其他样式库，请相应地进行修改。