功能

代碼編輯器

安裝

命令行：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"