code-editor
CodeMirror(6) component for Vue(3).
Usage
Install
npm install @wcfdehao/code-editor
local component
<template>
<code-editor
v-model="code"
:dark="true"
language="javascript"
/>
</template>
<script>
import {ref} from 'vue'
import { codeEditor } from '@wcfdehao/code-editor'
export default {
components: {
codeEditor
},
setup() {
const code = ref(`console.log('Hello, world!')`)
return {
code
}
}
}
</script>
global component
import { createApp } from 'vue'
import App from './App.vue'
import CodeEditor from '@wcfdehao/code-editor'
createApp(App).use(CodeEditor, {
dark:true,
language:'python',
tabSize: 2
}).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.