代码编辑器
何时使用
在有需要文本输入且输入是代码时,该组件提供代码高亮、折叠、行号等功能
代码演示
<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 | 编程语言 | CodeEditorLanguagesUnio | JAVASCRIPT |
theme | 窗口主题色 | CodeEditorLanguagesUnio | |
placeholder | 输入空时代替文本 | string | |
autofocus | 自动聚焦 | boolean | true |
disabled | 是否禁用 | boolean | false |
copyable | 是否可以复制 | boolean | true |
hiddenGutter | 说明隐藏 | boolean | false |
saveOptions | 自动上传和初始化组件数据。 注意⚠️:同一个工具下的多个key值需要保证唯一性。 | object | autoSave:false,key:"" |
showStatusBar | 是否展示底部状态栏 | boolean | false |