CodeEditor 代码编辑器

提供代码编辑能力，支持多语言语法高亮（基于 Shiki）、行号显示、Tab 缩进、自动补全括号、文件拖拽等功能。

基础用法

通过 v-model 双向绑定代码内容，language 指定语言。

// JavaScript 示例
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = Array.from({ length: 10 }, (_, i) => fibonacci(i));
console.log('Fibonacci:', result);

多语言支持

支持 JavaScript、TypeScript、HTML、CSS、JSON、Python、Vue 等多种语言高亮。

// JavaScript 示例
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

const result = Array.from({ length: 10 }, (_, i) => fibonacci(i));
console.log('Fibonacci:', result);

只读模式

设置 readonly 属性使编辑器只读，用户可查看和复制代码但不能编辑。

<!-- HTML 示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>NacrDesign</title>
</head>
<body>
  <h1>Hello World</h1>
  <p>欢迎使用代码编辑器组件</p>
</body>
</html>

隐藏头部和行号

设置 show-header 为 false 隐藏顶部栏，show-line-numbers 为 false 隐藏行号。

/* CSS 示例 */
.card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
}

可折叠 & 底部信息

collapsible 允许折叠编辑器，show-footer 显示光标位置和字符数。

# Python 示例
from dataclasses import dataclass
from typing import List

@dataclass
class Student:
    name: str
    age: int
    grades: List[float]

    @property
    def average(self) -> float:
        return sum(self.grades) / len(self.grades)

students = [
    Student("Alice", 20, [90.0, 85.5, 92.0]),
    Student("Bob", 22, [78.0, 88.0, 95.0]),
]

变体样式

default / bordered / filled 三种风格。

// TypeScript 示例
interface User {
  id: number;
  name: string;
  email: string;
  role: 'admin' | 'user' | 'guest';
}

function greet(user: User): string {
  return `Hello, ${user.name}!`;
}

自动补全括号 & 智能缩进

输入左括号自动补全右括号，回车自动缩进，支持 Tab / Shift+Tab 缩进/反缩进。

// 输入 { 或 ( 试试自动补全
function add(a, b) {

}

const obj = {

}

文件拖拽

将文本文件直接拖入编辑器即可载入文件内容（限制 100KB 以内）。

{
  "name": "nacr-design",
  "version": "0.1.8",
  "description": "Nuxt 3/4 UI Component Library",
  "dependencies": {
    "echarts": "^6.1.0",
    "marked": "^18.0.5"
  }
}

Props

参数	类型	默认值	说明
`modelValue`	`string`	`''`	代码内容，支持 v-model
`language`	`string`	`'javascript'`	编程语言，用于语法高亮（js/ts/html/css/json/python/vue 等）
`placeholder`	`string`	`'请输入代码...'`	占位文本
`disabled`	`boolean`	`false`	是否禁用
`readonly`	`boolean`	`false`	是否只读
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	编辑器尺寸
`variant`	`'default' \| 'bordered' \| 'filled'`	`'default'`	外观变体
`showLineNumbers`	`boolean`	`true`	是否显示行号
`showHeader`	`boolean`	`true`	是否显示头部栏（语言标签 / 操作按钮）
`showFooter`	`boolean`	`false`	是否显示底部信息栏
`showCount`	`boolean`	`false`	是否显示字符计数
`collapsible`	`boolean`	`false`	是否可折叠
`height`	`string \| number`	`300`	编辑区域高度，数字为 px
`maxlength`	`number`	`-`	最大字符数
`autofocus`	`boolean`	`false`	是否自动聚焦
`tabSize`	`number`	`2`	Tab 缩进空格数
`insertSpaces`	`boolean`	`true`	Tab 插入空格而非 \t
`theme`	`'dark' \| 'light'`	`'dark'`	编辑器主题

Events

事件名	回调参数	说明
`update:modelValue`	`(val: string)`	代码内容变化时触发
`change`	`(val: string)`	代码内容变化时触发
`focus`	`(e: FocusEvent)`	编辑器获得焦点时触发
`blur`	`(e: FocusEvent)`	编辑器失去焦点时触发

Methods

方法名	参数	说明
`focus`	`()`	聚焦编辑器
`blur`	`()`	失焦编辑器
`getEditor`	`() => HTMLTextAreaElement`	获取原生 textarea 元素