Vue3代码展示(vue-codemirror)

简介: `vue-codemirror`插件为Vue应用提供了一个强大的代码编辑器组件,支持代码高亮、自定义样式、暗黑模式等特性。通过简单的配置即可实现丰富的代码编辑体验。安装依赖后,创建`CodeMirror.vue`组件并在目标页面中使用即可。

vue-codemirror 插件

可自定义设置以下属性:

  • 代码样式(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 } 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按键缩进空格数
}
const props = withDefaults(defineProps<Props>(), {
  // placeholder: 'Code goes here...',
  codeStyle: () => { return {} },
  dark: false,
  code: '',
  // autofocus: false,
  // disabled: false,
  // indentWithTab: true,
  // tabSize: 2
})
const extensions = props.dark ? [vue(), oneDark] : [vue()]
const codeValue = ref(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 onFocus (viewUpdate: any) {
  emits('focus', viewUpdate)
}
function onBlur (viewUpdate: any) {
  emits('blur', viewUpdate)
}
</script>
<template>
  <div>
    <Codemirror
      v-model="codeValue"
      :style="codeStyle"
      :extensions="extensions"
      @ready="handleReady"
      @change="onChange"
      @focus="onFocus"
      @blur="onBlur"
      v-bind="$attrs"
    />
  </div>
</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>
相关文章
|
6天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项?
在使用`v-model`处理自定义组件双向数据绑定时,要仔细考虑各种因素,确保数据的准确传递和更新,同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循,能够更好地发挥`v-model`的优势,实现高效的双向数据绑定效果。
109 64
|
6天前
|
JavaScript 前端开发 API
Vue 3 中 v-model 与 Vue 2 中 v-model 的区别是什么?
总的来说,Vue 3 中的 `v-model` 在灵活性、与组合式 API 的结合、对自定义组件的支持等方面都有了明显的提升和改进,使其更适应现代前端开发的需求和趋势。但需要注意的是,在迁移过程中可能需要对一些代码进行调整和适配。
|
1月前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
28天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
57 7
|
29天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
47 3
|
1月前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
303 4
|
28天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
46 1
|
28天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
49 1
|
28天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
61 1
|
1月前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef