@hep-code-runner/vue3

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

安装

npm install @hep-code-runner/vue3

引入

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

CodeRunner

用法

<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 | '运行' | 运行按钮文字 |

受控模式

<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

用法

<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>

受控模式

<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