@hep-code-runner/vue2

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

安装

npm install @hep-code-runner/vue2

引入

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

CodeRunner

用法

<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 替代：

<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

用法

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

受控模式

<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