前端插件庫(kù)之vue3使用vue-codemirror插件的步驟和實(shí)例
基于 CodeMirror ,適用于 Vue 的 Web 代碼編輯器。
使用
1.命令行安裝
npm install vue-codemirror --save // cnpm install vue-codemirror --save
如果運(yùn)行官網(wǎng)例子時(shí), 報(bào)錯(cuò):
@codemirror/lang-javascript
@codemirror/theme-one-dark
可以在終端中安裝對(duì)應(yīng)文件, 解決問(wèn)題
npm i @codemirror/lang-javascript npm i @codemirror/theme-one-dark
2.在需要的組件中配置
<template> <codemirror v-model="code" placeholder="Code gose here..." :style="{ height: '400px' }" :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>
配置說(shuō)明:
個(gè)人代碼編輯區(qū)Demo
代碼編輯區(qū)
支持代碼編輯區(qū), 滿足白天/黑夜主題切換, 滿足c++/python語(yǔ)言切換
不足, 沒(méi)有滿足代碼提示
組件代碼 vue3
<template> <button @click="changeTheme($event)">黑夜</button> <button @click="changeMode($event)">C++</button> <codemirror v-model="code" placeholder="Code gose here..." :style="style" :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() { // 數(shù)據(jù) 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。創(chuàng)建({擴(kuò)展}) }); // 方法 // 失去焦點(diǎn)時(shí),使用已編輯的代碼 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>
總結(jié)
到此這篇關(guān)于前端插件庫(kù)之vue3使用vue-codemirror插件的文章就介紹到這了,更多相關(guān)vue3使用vue-codemirror插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue項(xiàng)目中使用fontawesome圖標(biāo)庫(kù)的方法
fontawesome的圖標(biāo)有免費(fèi)版和專(zhuān)業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個(gè)圖標(biāo)庫(kù),主要有實(shí)心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對(duì)應(yīng)的圖標(biāo)庫(kù),無(wú)須全部下載,對(duì)vue?fontawesome圖標(biāo)庫(kù)相關(guān)知識(shí)感興趣的朋友一起看看吧2023-12-12詳解vue-cli中的ESlint配置文件eslintrc.js
本篇文章主要介紹了vue-cli中的ESlint配置文件eslintrc.js詳解 ,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載
這篇文章主要為大家詳細(xì)介紹了vue使用better-scroll實(shí)現(xiàn)下拉刷新、上拉加載,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-11-11Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法
Vue 路由過(guò)渡是對(duì) Vue 程序一種快速簡(jiǎn)便的增加個(gè)性化效果的的方法,這篇文章主要介紹了Vue實(shí)現(xiàn)路由過(guò)渡動(dòng)效的4種方法,感興趣的可以了解一下2021-05-05淺談vue項(xiàng)目,訪問(wèn)路徑#號(hào)的問(wèn)題
這篇文章主要介紹了淺談vue項(xiàng)目,訪問(wèn)路徑#號(hào)的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解
這篇文章主要介紹了淺談vue中關(guān)于checkbox數(shù)據(jù)綁定v-model指令的個(gè)人理解,v-model用于表單的數(shù)據(jù)綁定很常見(jiàn),下面就來(lái)詳細(xì)的介紹一下2018-11-11vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能示例詳解
這篇文章主要介紹了vue+element實(shí)現(xiàn)下拉菜單并帶本地搜索功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-09-09