盘古低代码代码编辑器
HiCodeEditor 是一个用于在线编写代码的代码编辑器组件，它可以直接运行在浏览器中。支持多种语言的语法高亮，以及不同风格的主题，同时还支持实时语法检查，代码折叠，自定义语法提示等功能。
安装方式
bash
yarn add pangea-ui引用方式
js
import HiCodeEditor from "pangea-ui/hi-code-editor";
import "pangea-ui/dist/style.css";API
Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| model-value (v-model) | 编辑器数据 | string、json | |
| mode | 模式 | "javascript"、"css"、"json"等 | javascript |
| theme | 主题 | "eclipse"、"ambiance"、"chrome"、"clouds"等 | eclipse |
| fontSize | 字体大小 | string | 14 |
| height | 高度 | string | 300px |
| minHeight | 最小高度 | number | 300 |
| maxLines | 最大行数 | number | 1000 |
| minLines | 最小行数 | number | 1 |
| autoCompleteList | 代码提示 | IAutoCompletion[] |
javascript
interface IAutoCompletion {
caption: string; // 提示-标题
meta: string; // 提示-内容
value: string; // 选择提示后插入的内容
score: number; // 权重。数值越大，提示越靠前
}Methods
| 方法名 | 描述 | 参数 | 返回值 |
|---|---|---|---|
| getValue | 获取编辑器值 | ||
| setValue | 设置编辑器值 | value: string、json | |
| focus | 编辑器获取焦点 |
Events
| 事件名 | 描述 | 参数 | 返回值 |
|---|---|---|---|
| change | 编辑器值改变时 | (string)当前编辑器值 | |
| focus | 编辑器获得焦点时 | ||
| blur | 编辑器失去焦点时 |
使用示例
html
<template>
<HiCodeEditor v-model="data" :auto-complete-list="autoCompleteList" />
</template>
<script lang="ts" setup>
import { ref } from "vue";
// 编辑器值
const data = ref("");
// 代码提示
const autoCompleteList = [
{
meta: "获取变量 ctx.state.visible",
caption: "ctx.state",
value: "ctx.state",
score: 3,
},
];
</script>