CodeEditor
When To Use
When text input is required and the input is code, this component provides functions such as code highlighting, folding, and line numbers
Examples
<template>
<h-code-editor v-model="textInput" lang="TYPESCRIPT" />
</template>
<script setup lang="ts">
import { ref } from 'vue';
const textInput = ref(`function likeUserAgent(str: string): boolean {
return (
str.includes('Mozilla') ||
str.includes('Opera') ||
str.includes('Dalvik') ||
str.includes('AppleTV') ||
str.includes('Windows') ||
str.includes('Mac') ||
str.includes('Linux') ||
str.includes('Android') ||
str.includes('Chromium') ||
str.includes('Electron') ||
str.includes('Gecko')
);
}
export function isUserAgent(value) {
return likeUserAgent(value);
}`);
</script>
API
Props
Property | Description | Type | default |
---|---|---|---|
modelValue/v-model | Code editor content | string | |
lang | Programming language | CodeEditorLanguagesUnio | JAVASCRIPT |
theme | editor theme color | CodeEditorThemesUnio | |
placeholder | PlaceHolder of editor | string | |
autofocus | Auto focus to editor | boolean | true |
disabled | Whether to disable | boolean | false |
copyable | Whether to copy | boolean | true |
hiddenGutter | hiddenGutter | boolean | false |
saveOptions | Automatically upload and initialize component data. Note ⚠️: Multiple key values under the same tool need to be unique. | object | autoSave:false,key:"" |
showStatusBar | Whether to display the bottom status bar | boolean | false |