当前位置：首页 > VUE

vue代码框实现

2026-02-19 09:54:59VUE

Vue 代码框实现方法

在 Vue 中实现代码框功能通常需要结合语法高亮库和 UI 组件。以下是几种常见实现方式：

使用 Prism.js 实现语法高亮

安装 Prism.js 依赖：

npm install prismjs

在组件中使用：

<template>
  <pre><code class="language-javascript">{{ code }}</code></pre>
</template>

<script>
import Prism from 'prismjs';
import 'prismjs/themes/prism.css';

export default {
  data() {
    return {
      code: 'const message = "Hello Vue";\nconsole.log(message);'
    }
  },
  mounted() {
    Prism.highlightAll();
  }
}
</script>

使用 highlight.js 实现

安装 highlight.js：

npm install highlight.js

组件实现：

<template>
  <pre v-highlightjs><code class="javascript">{{ code }}</code></pre>
</template>

<script>
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';

export default {
  directives: {
    highlightjs(el) {
      const blocks = el.querySelectorAll('code');
      blocks.forEach(block => {
        hljs.highlightElement(block);
      });
    }
  },
  data() {
    return {
      code: 'function test() {\n  return "test";\n}'
    }
  }
}
</script>

使用第三方组件库

对于更完整的解决方案，可以使用专门为 Vue 设计的代码高亮组件：

vue-code-highlight：
```
npm install vue-code-highlight
```

使用示例：

<template>
  <code-highlight lang="javascript">
    const arr = [1, 2, 3];
    arr.map(x => x * 2);
  </code-highlight>
</template>

<script>
import { CodeHighlight } from 'vue-code-highlight';
import 'vue-code-highlight/themes/duotone-sea.css';

export default {
  components: {
    CodeHighlight
  }
}
</script>

vue-prism-editor（可编辑代码框）：
```
npm install vue-prism-editor prismjs
```

使用示例：

<template>
  <prism-editor v-model="code" language="js" :line-numbers="true" />
</template>

<script>
import { PrismEditor } from 'vue-prism-editor';
import 'vue-prism-editor/dist/prismeditor.min.css';

export default {
  components: {
    PrismEditor
  },
  data() {
    return {
      code: '// Your code here'
    }
  }
}
</script>

自定义样式和功能

对于需要完全自定义的代码框，可以结合 CSS 和 Vue 的功能：

vue代码框实现

<template>
  <div class="code-container">
    <div class="code-toolbar">
      <button @click="copyCode">Copy</button>
    </div>
    <pre class="code-block"><code>{{ code }}</code></pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      code: 'npm install vue'
    }
  },
  methods: {
    copyCode() {
      navigator.clipboard.writeText(this.code);
    }
  }
}
</script>

<style>
.code-container {
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #f5f5f5;
  padding: 10px;
}
.code-toolbar {
  margin-bottom: 10px;
}
.code-block {
  margin: 0;
  white-space: pre-wrap;
  font-family: monospace;
}
</style>

选择哪种实现方式取决于项目需求，简单的显示功能可以使用原生实现，复杂需求则推荐使用专门的库。