vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
更新時間：2019年08月27日 14:15:51 作者：跌跌撞撞的博客
這篇文章主要介紹了vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
1、首先使用npm安裝sql-formatter插件
npm install --save sql-formatter
2、然后引入該sql-formatter.js文件
import sqlFormatter from "sql-formatter";
3、接下來就是針對需要格式化的代碼調(diào)用該方法就OK啦
/*代碼格式化*/
format(){
/*獲取文本編輯器內(nèi)容*/
let sqlContent="";
sqlContent=this.editor.getValue();
/*將sql內(nèi)容進行格式后放入編輯器中*/
this.editor.setValue(sqlFormatter.format(sqlContent));
}
4、下面截圖就是格式化前與格式化后的區(qū)別
總結(jié)
以上所述是小編給大家介紹的vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式
這篇文章主要介紹了vue使用動態(tài)添加路由(router.addRoutes)加載權(quán)限側(cè)邊欄的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2022-06-06
最近接了一個移動端的項目，實現(xiàn)微信掃碼功能，今天小編利用這個平臺給大家分享vue實現(xiàn)二維碼掃描功能的實現(xiàn)代碼，需要的朋友參考下吧2021-08-08
這篇文章主要為大家介紹了VUE render函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了vue項目打包發(fā)布后接口報405錯誤的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了Vue 組件間的樣式?jīng)_突污染，當(dāng)多個樣式出現(xiàn)時，就會導(dǎo)致樣式?jīng)_突，本文介紹了具體解決方法2017-08-08
這篇文章主要為大家介紹了vite與xcode環(huán)境變量配置記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
詳解Vue3如何優(yōu)雅的監(jiān)聽localStorage變化
最近在研究框架，也仔細用了Vue3一些功能，所以本文就來和大家聊聊Vue3如何實現(xiàn)優(yōu)雅的監(jiān)聽localStorage的變化，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法
這篇文章主要介紹了Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue使用electron轉(zhuǎn)換項目成桌面應(yīng)用方法介紹
Electron也可以快速地將你的網(wǎng)站打包成一個原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11