在vue中使用codemirror编辑器,其中一种方法如下,比较容易上手

第一步:安装vue-codemirror

npm install vue-codemirror --save

第二步:引入(本文使用的是在组件局部引入)
第三步:在组件中声明

<template>
	<div>
		<codemirror v-model="code" :options="options"></codemirror>
	</div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/rubyblue.css'
import 'codemirror/mode/python/python.js'

export default {
  data () {
    return {
       code: '', // 编辑器绑定的值
		// 默认配置
		 options: {
		   tabSize: 2, // 缩进格式
		   theme: 'rubyblue', // 主题,对应主题库 JS 需要提前引入
		   lineNumbers: true, // 显示行号
		   line: true,
		   styleActiveLine: true, // 高亮选中行
		   hintOptions: {
		     completeSingle: true // 当匹配只有一项的时候是否自动补全
		   }
		 }
	 }
  },
  components: {
    codemirror
  }
}
</script>

实现效果图如下

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐