代码编辑器

HiCodeEditor 是一个用于在线编写代码的代码编辑器组件，它可以直接运行在浏览器中。支持多种语言的语法高亮，以及不同风格的主题，同时还支持实时语法检查，代码折叠，自定义语法提示等功能。

安装方式

yarn add pangea-ui

引用方式

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[]

interface IAutoCompletion {
  caption: string; // 提示-标题
  meta: string; // 提示-内容
  value: string; // 选择提示后插入的内容
  score: number; // 权重。数值越大，提示越靠前
}

Methods

方法名	描述	参数	返回值
getValue	获取编辑器值
setValue	设置编辑器值	value: string、json
focus	编辑器获取焦点

Events

事件名	描述	参数	返回值
change	编辑器值改变时	(string)当前编辑器值
focus	编辑器获得焦点时
blur	编辑器失去焦点时

使用示例

<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>