所属分类:web前端开发
1 2 | npm install vue-codemirror --save // cnpm install vue-codemirror --save |
如果运行官网例子时, 报错:
@codemirror/lang-javascript
@codemirror/theme-one-dark
可以在终端中安装对应文件, 解决问题
1 2 | npm i @codemirror/lang-javascript npm i @codemirror/theme-one-dark |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <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> |
代码编辑区
支持代码编辑区, 满足白天/黑夜主题切换, 满足c++/python语言切换
不足, 没有满足代码提示
组件代码 vue3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | <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插件的详细内容,更多请关注zzsucai.com其它相关文章!