npm package: @hep-code-runner/vue2
Description: Vue 2 code runner component
Latest version: 2.3.23

# @hep-code-runner/vue2

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

## 安装

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

## 引入

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

---

## CodeRunner

### 用法

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

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

export default {
  components: { CodeRunner },
};
</script>
```

### Props

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

### 受控模式

Vue 2 不支持多 v-model，使用 `.sync` 替代：

```vue
<template>
  <CodeRunner
    :language.sync="currentLanguage"
    :code.sync="currentCode"
  />
</template>

<script>
export default {
  data() {
    return {
      currentLanguage: 'javascript',
      currentCode: 'console.log("hello")',
    };
  },
};
</script>
```

### Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:language | language | 语言变化 |
| update:code | code | 代码变化 |
| 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>
import { CodeRunnerDialog } from "@hep-code-runner/vue2";

export default {
  components: { CodeRunnerDialog },
  methods: {
    handleSave() {
      this.$refs.dialog.close();
    },
  },
};
</script>
```

### 受控模式

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

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

<script>
export default {
  data() {
    return {
      visible: false,
      currentLanguage: 'python',
      currentCode: 'print("hello")',
    };
  },
  methods: {
    onClose() {},
    handleSave(close) {
      close();
    },
  },
};
</script>
```

### Props

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| value / v-model | boolean | false | 控制显隐 |
| :language.sync | string | 'javascript' | 当前语言 |
| :code.sync | 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: ^2.6.0
- prismjs: ^1.30.0