如果运行官网例子时, 报错:
@codemirror/lang-javascript
@codemirror/theme-one-dark
可以在终端中安装对应文件, 解决问题
npm i @codemirror/lang-javascriptnpm i @codemirror/theme-one-dark
2.在需要的组件中配置<template> <codemirror v-model="code" placeholder="code gose here..." : :autofocus="true" :indent-with-tab="true" :tabsize="2" :extensions="extensions" @ready="log('ready', $event)" @change="log('change', $event)" @focus="log('focus', $event)" @blur="log('blur', $event)" /></template><script>import { codemirror } from "vue-codemirror";import { javascript } from "@codemirror/lang-javascript";import { onedark } from "@codemirror/theme-one-dark";import { ref } from "vue";export default { components: { codemirror, }, setup() { const code = ref(`console.log('hello, world!')`); const extensions = [javascript(), onedark]; return { code, extensions, log: console.log, }; },};</script>
配置说明:
个人代码编辑区demo代码编辑区
支持代码编辑区, 满足白天/黑夜主题切换, 满足c++/python语言切换
不足, 没有满足代码提示
组件代码 vue3
<template> <button @click="changetheme($event)">黑夜</button> <button @click="changemode($event)">c++</button> <codemirror v-model="code" placeholder="code gose here..." : :mode="mode" :spellcheck="spellcheck" :autofocus="autofocus" :indent-with-tab="indentwithtab" :tabsize="tabsize" :extensions="extensions" @ready="log('ready', $event)" @change="log('change', $event)" @focus="log('focus', $event)" @blur="useeditedcode" /></template><script>import { codemirror } from "vue-codemirror";import { python } from "@codemirror/lang-python";import { cpp } from "@codemirror/lang-cpp";import { onedark } from "@codemirror/theme-one-dark";import "codemirror/addon/hint/show-hint.css";import { reactive, ref, torefs } from "vue";export default { components: { codemirror, }, setup() { // 数据 const code = ref(``); let selectvalue = "cpp"; let datetime = "黑夜"; const options = reactive({ style: { height: "400px" }, mode: "text/x-c++src", spellcheck: true, autofocus: true, indentwithtab: true, tabsize: 2, extensions: [cpp(), onedark], //传递给codemirror editorstate。创建({扩展}) }); // 方法 // 失去焦点时,使用已编辑的代码 function useeditedcode() { console.log("@@@blur@@@code:", code.value); console.log("@@@blur@@@cpp:", cpp); } // 改变主题 function changetheme(e) { console.log("options.extensions:", options.extensions); if (e.target.innerhtml === "黑夜") { options.extensions = []; datetime = e.target.innerhtml = "白天"; } else { options.extensions = [onedark]; datetime = e.target.innerhtml = "黑夜"; } } // 改变模式 function changemode(e) { console.log("selectvalue:", selectvalue); if (selectvalue === "cpp") { if (datetime === "黑夜") options.extensions = [python(), onedark]; else options.extensions = [python()]; selectvalue = "python"; e.target.innerhtml = "python"; options.mode = "text/x-python"; } else { if (datetime === "黑夜") options.extensions = [cpp(), onedark]; else options.extensions = [cpp()]; selectvalue = "cpp"; e.target.innerhtml = "c++"; options.mode = "text/x-c++src"; } } // 返回 return { code, selectvalue, datetime, ...torefs(options), log: console.log, useeditedcode, changetheme, changemode, }; },};</script>
以上就是vue3如何使用vue-codemirror插件的详细内容。