vue-codemirror的简单使用

功能

代码编辑器

安装

命令行：npm install codemirror vue-codemirror --save

单文件引入

import { Codemirror } from 'vue-codemirror'

单文件展示

 <codemirror
    v-model="localCode"
    class="code-mirror"
    :placeholder="placeholder"
    :autofocus="true"
    :indent-with-tab="true"
    :tab-size="2"
    :extensions="extensions"
    :disabled="disabled"
    :style="customStyle"
    @ready="handleReady"
    @change="onChange"
    @focus="onFocus"
    @blur="onBlur"
  />

这里的单文件封装成一个组件，以供父组件调用

属性解读

• v-model="localCode"： 双向绑定数据

• :placeholder="placeholder" 占位提示语

• :autofocus="true" 自动聚焦

• :indent-with-tab="true"

• :extensions="extensions" 扩展

扩展安装

 pnpm install @codemirror/lang-json // json扩展
 pnpm install @codemirror/theme-one-dark  // theme-one-dark扩展

单文件导入扩展

import { json } from '@codemirror/lang-json'
import { oneDark } from '@codemirror/theme-one-dark'
const extensions = [json(), oneDark]  // 加载模块

显示

监听父组件传过来的值，通过vue3双向绑定原理更新到dom展示

const localCode = ref(props.code) // 获取父组件传过来的值，初始化数据

监听父组件数据变化，更新子组件数据

​

watch(
  () => props.code,
  (newVal) => {
    localCode.value = newVal
  }
)

编辑器更改

onChange获取数据变化，vue3 => emit传递给父组件

const onChange = (value: string, viewUpdate: any) => {
  console.log('change', value)
  emit('update:code', value)
}

是否可编辑

可以设置disabled状态，设为是否可读，

:disabled="disabled"