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