npm package: @hep-code-runner/vue3
Description: Vue 3 code runner component
Latest version: 2.3.17

# @hep-code-runner/vue3

Vue 3 代码运行器组件，基于 Piston API 支持多种编程语言在线执行。

## 安装

```bash
npm install @hep-code-runner/vue3
```

## 引入

```js
import { CodeRunner } from "@hep-code-runner/vue3";
import "@hep-code-runner/vue3/dist/style.css";
```

---

## CodeRunner

### 用法

```vue
<template>
  <CodeRunner />
</template>

<script setup>
import { CodeRunner } from "@hep-code-runner/vue3";
</script>
```

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| pistonUrl | string | '/api/piston' | Piston API 地址 |
| token | string | - | 认证 Token（会作为 Authorization 和 id-token Header） |
| modelValue / v-model | string | '' | 当前代码 |
| v-model:language | string | 'javascript' | 当前语言 |
| theme | 'light' \| 'dark' | 'light' | 主题 |
| themeColor | string | - | 自定义主题色 |
| showLanguageSelector | boolean | true | 显示语言选择器 |
| showEditor | boolean | true | 显示代码编辑器 |
| editable | boolean | true | 是否可编辑 |
| executorLabel | string | '运行' | 运行按钮文字 |

### 受控模式

```vue
<script setup>
import { ref } from "vue";

const currentLanguage = ref("javascript");
const currentCode = ref('console.log("hello")');
</script>

<template>
  <CodeRunner
    v-model="currentCode"
    v-model:language="currentLanguage"
  />
</template>
```

### Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:modelValue | code | 代码变化 |
| update:language | language | 语言变化 |
| execute-start | - | 代码开始执行 |
| execute-end | result | 代码执行完成 |
| language-change | language, code, snippet | 语言切换，snippet 为新语言的默认代码片段 |
| change | code | 代码变化（防抖） |

---

## CodeRunnerDialog

### 用法

```vue
<template>
  <CodeRunnerDialog ref="dialog" title="代码执行器">
    <template #footer="{ close }">
      <button @click="close">取消</button>
      <button @click="handleSave">保存</button>
    </template>
  </CodeRunnerDialog>
</template>

<script setup>
import { ref } from "vue";
import { CodeRunnerDialog } from "@hep-code-runner/vue3";

const dialog = ref(null);

function handleSave() {
  dialog.value.close();
}
</script>
```

### 受控模式

```vue
<script setup>
import { ref } from "vue";

const visible = ref(false);
const currentLanguage = ref("python");
const currentCode = ref('print("hello")');
</script>

<template>
  <button @click="visible = true">打开</button>

  <CodeRunnerDialog
    v-model="visible"
    v-model:language="currentLanguage"
    v-model:code="currentCode"
    title="代码执行器"
    width="800"
    @close="onClose"
  >
    <template #footer="{ close }">
      <button @click="close">取消</button>
      <button @click="handleSave(close)">保存</button>
    </template>
  </CodeRunnerDialog>
</template>
```

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| v-model | boolean | false | 控制显隐 |
| v-model:language | string | 'javascript' | 当前语言 |
| v-model:code | string | '' | 当前代码 |
| title | string | '代码执行器' | 弹窗标题 |
| width | string \| number | 800 | 弹窗宽度 |
| pistonUrl | string | '/api/piston' | Piston API 地址 |
| token | string | - | 认证 Token（会作为 Authorization 和 id-token Header） |
| theme | 'light' \| 'dark' | 'light' | 主题 |
| themeColor | string | - | 自定义主题色 |
| showLanguageSelector | boolean | true | 显示语言选择器 |
| showEditor | boolean | true | 显示代码编辑器 |
| editable | boolean | true | 是否可编辑 |
| executorLabel | string | '运行' | 运行按钮文字 |
| closeOnOverlayClick | boolean | true | 点击弹窗外部是否关闭 |

### Slots

| 插槽名 | 参数 | 说明 |
|--------|------|------|
| footer | { close } | 底部自定义内容 |

### Methods

| 方法 | 说明 |
|------|------|
| open() | 打开弹窗 |
| close() | 关闭弹窗 |

### Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| close | - | 弹窗关闭 |

## 依赖

- vue: ^3.0.0
- prismjs: ^1.30.0