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>
相关文章
|
8天前
|
缓存 监控 UED
升级 Vue3 时,如何减少打包体积的增加?
升级 Vue3 时,如何减少打包体积的增加?
92 59
|
8天前
|
API UED
如何实现Vue2项目升级Vue3?
如何实现Vue2项目升级Vue3?
93 59
|
8天前
|
JavaScript
在vue3中(vite)引入unocss,安装配置unocss
在vue3中(vite)引入unocss,安装配置unocss
|
8天前
|
API UED
升级 Vue3 后,项目的打包体积会有什么变化?
升级 Vue3 后,项目的打包体积会有什么变化?
98 57
|
9天前
|
缓存 JavaScript 前端开发
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
该文章全面覆盖了Vue.js从基础知识到进阶原理的48个核心知识点,包括Vue CLI项目结构、组件生命周期、响应式原理、Composition API的使用等内容,并针对Vue 2与Vue 3的不同特性进行了详细对比与讲解。
「offer来了」从基础到进阶原理,从vue2到vue3,48个知识点保姆级带你巩固vuejs知识体系
|
10天前
|
JavaScript 前端开发 API
vue3的传送门teleport究竟有多神奇?suspense发起异步请求有多简约?
该文章介绍了Vue3中新特性Teleport和Suspense的使用方法,演示了如何使用Teleport进行DOM节点的非父子关系传送,以及Suspense在处理异步组件加载时的优雅展示和错误处理技巧。
|
11天前
|
JavaScript
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明,并展示了粒子特效的实现效果。同时,提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码,以及完整代码的下载链接。
|
10天前
|
JavaScript API
再不学vue3就没有人要你了!速来围观vue3
这篇技术文章介绍了作者从最初对学习 Vue3 抵触到最终决定投入学习的心路历程,展示了 Vue3 相较于 Vue2 的诸多改进和新特性,如更优的性能、更小的代码体积及更佳的 TypeScript 支持。文章重点阐述了 Vue3 中 createApp 的使用变化、emits 机制、多事件处理、Fragment 的引入等重要功能升级。此外,还深入探讨了 Composition API 和 Options API 的区别,强调 Composition API 在代码组织和逻辑复用方面的优势,并给出了在不同项目规模中选择合适 API 的建议。
22 0
|
10天前
|
JavaScript 前端开发 UED
组件库实战 | 用vue3+ts实现全局Header和列表数据渲染ColumnList
该文章详细介绍了如何使用Vue3结合TypeScript来开发全局Header组件和列表数据渲染组件ColumnList,并提供了从设计到实现的完整步骤指导。
|
10天前
|
JavaScript API
模块化妙用!用vue3实现一个鼠标追踪器和异步加载组件
该文章展示了如何使用Vue3的Composition API实现鼠标追踪器功能,并介绍了创建异步加载组件的方法,利用TS泛型增强了组件的灵活性与可维护性。
下一篇
无影云桌面