开发预览更新于 2026-05-10

CodeEditor 代码编辑器

轻量代码编辑容器：textarea + 行号 + Tab 缩进。重型语法/补全请接 Monaco/CodeMirror。

基础用法

定位是”视觉容器 + 轻交互”：行号、Tab 缩进、行尾保持、ARIA 标签齐全；不内置语法高亮。若需高亮，让消费方在外层裹一个 overlay（参考 VariableAwareInput 的 overlay 技法）。

背景

12345678910

function fizzbuzz(n: number) {
  for (let i = 1; i <= n; i++) {
    let out = '';
    if (i % 3 === 0) out += 'Fizz';
    if (i % 5 === 0) out += 'Buzz';
    console.log(out || i);
  }
}

fizzbuzz(15);

<script setup lang="ts">
import { ref } from 'vue';
import { CfCodeEditor } from '@chufix-design/vue';
const code = ref(`function fizzbuzz(n: number) {
  for (let i = 1; i <= n; i++) {
    let out = '';
    if (i % 3 === 0) out += 'Fizz';
    if (i % 5 === 0) out += 'Buzz';
    console.log(out || i);
  }
}

fizzbuzz(15);`);
</script>

<template>
  <CfCodeEditor v-model="code" language="typescript" :rows="12" />
</template>

<script setup>
import { ref } from 'vue';
import { CfCodeEditor } from '@chufix-design/vue';
const code = ref(`function fizzbuzz(n) {
  for (let i = 1; i <= n; i++) {
    let out = '';
    if (i % 3 === 0) out += 'Fizz';
    if (i % 5 === 0) out += 'Buzz';
    console.log(out || i);
  }
}

fizzbuzz(15);`);
</script>

<template>
  <CfCodeEditor v-model="code" language="typescript" :rows="12" />
</template>

<CfCodeEditor value={code} onChange={setCode} language="typescript" rows={12} />

<CfCodeEditor value={code} onChange={setCode} language="typescript" rows={12} />

readOnly / wrap / 无行号

不同状态组合：只读演示文档、自动换行长文本、无行号紧凑模式。

背景

1234567

# read-only 模式
# 输入会被拦截，行号 + 灰底突出 readOnly 状态

const cfg = {
  mode: 'view',
  permissions: ['read'],
};

这是一段非常长的文本，用来演示 wrap 模式：当行宽超出容器时会自动软换行而不是横向滚动。在普通 wrap=false 模式下，长行会触发水平滚动条；wrap=true 时则像 prose 一样自然换行，适合用来展示 markdown 草稿、SQL 单行语句等场景。

// 不显示行号
function tiny() { return 42; }

<script setup lang="ts">
import { ref } from 'vue';
import { CfCodeEditor } from '@chufix-design/vue';
const ro = ref(`# read-only 模式
# 输入会被拦截，行号 + 灰底突出 readOnly 状态

const cfg = {
  mode: 'view',
  permissions: ['read'],
};`);
const wrapped = ref('这是一段非常长的文本，用来演示 wrap 模式：当行宽超出容器时会自动软换行而不是横向滚动。在普通 wrap=false 模式下，长行会触发水平滚动条；wrap=true 时则像 prose 一样自然换行，适合用来展示 markdown 草稿、SQL 单行语句等场景。');
const noNumbers = ref('// 不显示行号\nfunction tiny() { return 42; }');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfCodeEditor v-model="ro" language="typescript" :rows="5" read-only />
    <CfCodeEditor v-model="wrapped" :rows="4" wrap />
    <CfCodeEditor v-model="noNumbers" :rows="3" :show-line-numbers="false" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { CfCodeEditor } from '@chufix-design/vue';
const ro = ref(`# read-only 模式
# 输入会被拦截，行号 + 灰底突出 readOnly 状态

const cfg = {
  mode: 'view',
  permissions: ['read'],
};`);
const wrapped = ref('这是一段非常长的文本，用来演示 wrap 模式：当行宽超出容器时会自动软换行而不是横向滚动。在普通 wrap=false 模式下，长行会触发水平滚动条；wrap=true 时则像 prose 一样自然换行，适合用来展示 markdown 草稿、SQL 单行语句等场景。');
const noNumbers = ref('// 不显示行号\nfunction tiny() { return 42; }');
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CfCodeEditor v-model="ro" language="typescript" :rows="5" read-only />
    <CfCodeEditor v-model="wrapped" :rows="4" wrap />
    <CfCodeEditor v-model="noNumbers" :rows="3" :show-line-numbers="false" />
  </div>
</template>

<CfCodeEditor value={code} onChange={set} readOnly />
<CfCodeEditor value={text} onChange={set} wrap />
<CfCodeEditor value={snip} onChange={set} showLineNumbers={false} />

<CfCodeEditor value={code} onChange={set} readOnly />
<CfCodeEditor value={text} onChange={set} wrap />
<CfCodeEditor value={snip} onChange={set} showLineNumbers={false} />

API

属性	类型	默认值	说明
`modelValue` / `value`	`string`	`''`	代码内容
`language`	`string`	`'plaintext'`	仅作 `data-language` 透传，不参与渲染
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`showLineNumbers`	`boolean`	`true`
`readOnly`	`boolean`	`false`
`rows`	`number`	`12`	可见行数
`wrap`	`boolean`	`false`	长行软换
`tabSize`	`number`	`2`	Tab 插入空格数；0 表示让 Tab 移动焦点