代码编辑器

介绍

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

API

Props

参数名	描述	类型	默认值
status	默认状态	'default'|'hide'|'readonly'	'default'
title	标题	string	'代码编辑器'
showLabel	显示标题	boolean	true
value	默认值	string	-
name	数据字段	string	'CODEEDITOR_随机八位字符'
mode	编辑器类型	'javascript'|'json'|'css'|'html'|'java'|'sql'	'javascript'
userWorker	是否开启语法检测	boolean	true
theme	主题	Theme	'eclipse'
fontSize	字号	string	'14'
width	宽	Size	-
height	高	Size	-
baseStyle	自定义样式	string	-
customClass	类名绑定 ， 绑定类的名称	string	-
uniqueKey	唯一标识 ， 组件的唯一标识	string	-
extra	补充说明	string	-
tip	气泡提醒	string	-
validate	校验	Validate	-
loop	循环数据, 循环渲染设置	Loop	-

Events

事件名	描述	参数
onChange	值改变时	ctx params: { value:string }
onFocus	获得焦点时	ctx params: FocusEvent
onBlur	失去焦点时	ctx params: FocusEvent

Type

// 主题
type Theme =
  | "eclipse"
  | "ambiance"
  | "chrome"
  | "clouds"
  | "clouds_midnight"
  | "tomorrow"
  | "tomorrow_night";

// 宽度/高度
type Size = {
  unit: "px" | "%",
  value: string,
};

// 校验
type Validate = {
  required: boolean, // 必填
  requiredMsg: string, // 必填错误提示
  customFunc: boolean, // 自定义函数
  func: string, // 自定义函数
};

// 循环
type Loop = {
  "data": any[],
  "paramName": string,
  "indexName": string,
  "key": string
}

// 循环变量数据参数
type LoopParams = {
  "indexName":string,
  "paramName":string,
  "ref":ComputedRefImpl, // 全部的循环变量数据
  "row":number,
  "rowIndex":number
}[]