Skip to content
On this page

代码编辑器

何时使用

在有需要文本输入且输入是代码时,该组件提供代码高亮、折叠、行号等功能

代码演示

<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

属性

属性说明类型默认值
modelValue/v-model代码编辑器内容string
lang编程语言CodeEditorLanguagesUnioJAVASCRIPT
theme窗口主题色CodeEditorLanguagesUnio
placeholder输入空时代替文本string
autofocus自动聚焦booleantrue
disabled是否禁用booleanfalse
copyable是否可以复制booleantrue
hiddenGutter说明隐藏booleanfalse
saveOptions自动上传和初始化组件数据。
注意⚠️:同一个工具下的多个key值需要保证唯一性。
objectautoSave:false,key:""
showStatusBar是否展示底部状态栏booleanfalse