code-editor

CodeMirror(6) component for Vue(3).

Usage

Install

1npm install @wcfdehao/code-editor

local component

1<template>
2  <code-editor
3    v-model="code"
4    :dark="true"
5    language="javascript"
6  />
7
8</template>
9
10<script>
11  import {ref} from 'vue'
12  import { codeEditor } from '@wcfdehao/code-editor'
13
14  export default {
15    components: {
16      codeEditor
17    },
18    setup() {
19      const code = ref(`console.log('Hello, world!')`)
20
21      return {
22        code
23      }
24    }
25  }
26</script>

global component

1import { createApp } from 'vue'
2import App from './App.vue'
3import CodeEditor from '@wcfdehao/code-editor'
4createApp(App).use(CodeEditor, {
5    dark:true,
6    language:'python',
7    tabSize: 2
8}).mount('#app')

Component Props

prop	description	type	default
modelValue	input value 双向绑定	String	''
readOnly	是否只读，只读时编辑框禁止编辑，内容禁止更改。	Boolean	false
language	编辑框的语言，默认支持，json,html,xml,python,javascript,markdown	String	json
dark	编辑框深模式，使用的是 oneDark 主题	Boolean	false
tabSize	编辑时一个tab键表示的空格数	Number	2
folded	代码是否折叠	Boolean	False
fixedHeight	编辑框的固定高度，表示像素。这个属性会被css覆盖。0表示根据内容自适应	Number	0
minHeight	编辑框最小高度，表示像素。这个属性会被css覆盖。0表示根据内容自适应	Number	0
border	编辑器边框样式，1px solid red	String	''

Component Events

event	description	params
update:modelValue	当编辑框中的内容发生改变时触发	(value: string, viewUpdate: ViewUpdate)
change	同上	同上
update	当编辑框的任何状态发生改变时触发	(viewUpdate: ViewUpdate)
focus	当编辑框获取焦点时	(viewUpdate: ViewUpdate)
blur	当编辑框失去焦点时	(viewUpdate: ViewUpdate)

License

Licensed under the MIT License.