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、接下來就是針對需要格式化的代碼調用該方法就OK啦
/*代碼格式化*/
format(){
/*獲取文本編輯器內容*/
let sqlContent="";
sqlContent=this.editor.getValue();
/*將sql內容進行格式后放入編輯器中*/
this.editor.setValue(sqlFormatter.format(sqlContent));
}
4、下面截圖就是格式化前與格式化后的區(qū)別
總結
以上所述是小編給大家介紹的vue實現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
相關文章
vue使用動態(tài)添加路由(router.addRoutes)加載權限側邊欄的方式
這篇文章主要介紹了vue使用動態(tài)添加路由(router.addRoutes)加載權限側邊欄的方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
Vue web前端三大主流框架之一,是一套用于構建用戶界面的漸進式框架,下面這篇文章主要給大家介紹了關于Vue安裝與配置教程的相關資料,文中通過圖文介紹的非常詳細,需要的朋友可以參考下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 組件間的樣式沖突污染，當多個樣式出現(xiàn)時，就會導致樣式沖突，本文介紹了具體解決方法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的變化，感興趣的小伙伴可以跟隨小編一起學習一下2023-06-06
Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法
這篇文章主要介紹了Vue中實現(xiàn)v-for循環(huán)遍歷圖片的方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Electron也可以快速地將你的網(wǎng)站打包成一個原生應用發(fā)布,下面這篇文章主要給大家介紹了關于Vue和React中快速使用Electron的相關資料,文中通過示例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11