Vue3代码展示（vue-codemirror）

原创已于 2024-11-07 11:02:28 修改 · 置顶 · 6.5k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2023-04-19 16:36:28 首次发布

Vue3 专栏收录该内容

89 篇文章

订阅专栏

文章介绍了如何在Vue项目中使用vue-codemirror插件来创建一个可自定义的代码编辑器。通过安装相关依赖，创建CodeMirror组件，并设置代码样式、暗黑主题和代码字符串等属性。在使用页面引入组件并监听各种事件，如ready、change、focus和blur。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可自定义设置以下属性：

代码样式（codeStyle），类型：CSSProperties，默认 {}
是否暗黑主题（dark），类型：boolean，默认 false
代码字符串（code），类型：string，默认 ''

参考文档：

效果如下图：

①安装所需依赖：

yarn add codemirror vue-codemirror @codemirror/lang-vue @codemirror/theme-one-dark

②创建代码展示组件CodeMirror.vue：

<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { ref, watchEffect } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { vue } from '@codemirror/lang-vue'
import { oneDark } from '@codemirror/theme-one-dark'
interface Props {
  codeStyle?: CSSProperties // 代码样式
  dark?: boolean // 是否暗黑主题
  code?: string // 代码字符串
  // placeholder?: string // 占位文本
  // autofocus?: boolean // 自动聚焦
  // disabled?: boolean // 禁用输入行为和更改状态
  // indentWithTab?: boolean // 启用 tab 按键
  // tabSize?: number // tab 按键缩进空格数
  // autoDestroy?: boolean // 组件销毁时是否自动销毁代码编辑器实例
}
const props = withDefaults(defineProps<Props>(), {
  codeStyle: () => ({}),
  dark: false,
  code: ''
  // placeholder: 'Code goes here...',
  // autofocus: false,
  // disabled: false,
  // indentWithTab: true,
  // tabSize: 2
})
const extensions = props.dark ? [vue(), oneDark] : [vue()]
const codeValue = ref('')
watchEffect(() => {
  codeValue.value = props.code
})
const emits = defineEmits(['update:code', 'ready', 'change', 'focus', 'blur'])
function handleReady (payload: any) {
  // console.log('ready')
  emits('ready', payload)
}
function onChange (value: string, viewUpdate: any) {
  emits('change', value, viewUpdate)
  emits('update:code', value)
}
function onBlur (viewUpdate: any) {
  emits('blur', viewUpdate)
}
</script>
<template>
  <Codemirror
    v-model="codeValue"
    :style="codeStyle"
    :extensions="extensions"
    @ready="handleReady"
    @change="onChange"
    @focus="onFocus"
    @blur="onBlur"
    v-bind="$attrs"
  />
</template>
<style lang="less" scoped>
:deep(.cm-editor) {
  border-radius: 8px;
  outline: none;
  border: 1px solid transparent;
  .cm-scroller {
    border-radius: 8px;
  }
}
:deep(.cm-focused) {
  border: 1px solid fade(@themeColor, 48%);
}
</style>

③在要使用的页面引入：

<script setup lang="ts">
import CodeMirror from './CodeMirror.vue'
import { ref } from 'vue'
const code = ref(`<script setup lang="ts">
import { dateFormat, requestAnimationFrame, cancelAnimationFrame, rafTimeout, cancelRaf } from 'vue-amazing-ui'
<\/script>
`)
function onReady (payload: any) {
  console.log('ready', payload)
}
function onChange (value: string, viewUpdate: any) {
  console.log('change', value)
  console.log('change', viewUpdate)
}
function onFocus (viewUpdate: any) {
  console.log('focus', viewUpdate)
}
function onBlur (viewUpdate: any) {
  console.log('blur', viewUpdate)
}
</script>
<template>
  <div>
    <h1>vue-codemirror 参考文档</h1>
    <ul class="m-list">
      <li>
        <a class="u-file" href="https://www.npmjs.com/package/vue-codemirror" target="_blank">vue-codemirror 插件</a>
      </li>
      <li>
        <a class="u-file" href="https://codemirror.net/" target="_blank">CodeMirror 官网</a>
      </li>
      <li>
        <a class="u-file" href="https://codemirror.net/docs/ref/" target="_blank">CodeMirror6 APIs</a>
      </li>
      <li>
        <a class="u-file" href="https://github.com/orgs/codemirror/repositories?q=lang-&type=all" target="_blank">CodeMirror6 Languages</a>
      </li>
      <li>
        <a class="u-file" href="https://github.com/orgs/codemirror/repositories?q=theme&type=all" target="_blank">CodeMirror6 Themes</a>
      </li>
    </ul>
    <h2 class="mt30 mb10">Codemirror</h2>
    <CodeMirror
      v-model:code="code"
      dark
      :codeStyle="{ width: '1000px', height: '500px', fontSize: '16px' }"
      @ready="onReady"
      @change="onChange"
      @focus="onFocus"
      @blur="onBlur" />
  </div>
</template>