Skip to content
On this page

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

PropertyDescriptionTypedefault
modelValue/v-modelCode editor contentstring
langProgramming languageCodeEditorLanguagesUnioJAVASCRIPT
themeeditor theme colorCodeEditorThemesUnio
placeholderPlaceHolder of editorstring
autofocusAuto focus to editorbooleantrue
disabledWhether to disablebooleanfalse
copyableWhether to copybooleantrue
hiddenGutterhiddenGutterbooleanfalse
saveOptionsAutomatically upload and initialize component data.
Note ⚠️: Multiple key values under the same tool need to be unique.
objectautoSave:false,key:""
showStatusBarWhether to display the bottom status barbooleanfalse