功能

代码编辑器

安装

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

单文件引入

import { Codemirror } from 'vue-codemirror'

单文件展示

 <codemirrorv-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"