功能
代码编辑器
安装
命令行: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"