技术文档

打开导航菜单

PIG AI Guide
============

切换主题搜索

[](https://wwads.cn/click/bait)[![](https://cdn.wwads.cn/creatives/9UFEBWm9yghqfP2A3Ri7GzEqF8ccpKj2J0fHzhS7.png)
](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)

[电商项目必备！Java 开源商城系统 SpringBoot+Vue 框架，功能齐全，全源码交付，可二开](https://wwads.cn/click/bundle?code=4jQpSYno5LBbz49BkpNUvNEIyc5l09)[广告](https://wwads.cn/?utm_source=property-270&utm_medium=footer "点击了解万维广告联盟")

PIGX 技术指南
=========

适配 5.0 以上单体和微服务版本

PIGX 技术指南PIG

⌘K

参与开发

快速上手

前端部分

浏览器兼容性前端配置项说明前端ENV环境配置前端目录结构前端首页组件开发前端国际化配置前端字体图标配置前端图表功能前端权限管理前端数据状态管理前端组件路由管理前端标签页管理前端字典工具使用前端参数工具使用前端通用工具函数省市区街四级联动组件前端代码编辑组件前端富文本组件前端表格组件前端表格分页组件前端表格工具栏组件前端上传组件前端左侧查询树前端文字提示组件前端悬浮输入组件前端组织架构组件前端标签列表组件前端表单校验

功能使用

后端部分

扩展必看

生产部署

社区分享

更新日志

更新日期: 2025-10-23

最后更新: 2025/8/19

切换主题

前端代码编辑组件
========

[](#引入组件)引入组件
-------------

![](https://minio.pigx.top/oss/202308/1690987106.png)

```


`const  CodeEditor  =  defineAsyncComponent(   ()  =>  import("/@/components/CodeEditor/index.vue")  );`




```

[](#使用方法)使用方法
-------------

```


`<template>
  <div>
    <CodeEditor
      v-model="code"
      mode="go"
      theme="idea"
      :readOnly="false"
      :height="300"
    />
  </div>
</template>` 




```

### [](#props)Props

| 属性 | 类型 | 默认值 | 说明 |
| --- | --- | --- | --- |
| 

`modelValue`

 | 

String

 | 

''

 | 

绑定的代码内容

 |
| 

`mode`

 | 

String

 | 

'go'

 | 

代码语言

 |
| 

`theme`

 | 

String

 | 

'idea'

 | 

代码编辑器的主题

 |
| 

`height`

 | 

\[String, Number\]

 | 

300

 | 

代码编辑器的高度

 |
| 

`options`

 | 

Object

 | 

{}

 | 

CodeMirror 的配置选项

 |
| 

`readOnly`

 | 

Boolean

 | 

false

 | 

是否只读

 |

### 本页导航

引入组件

使用方法

Props