vue實(shí)現(xiàn)codemirror代碼編輯器中的SQL代碼格式化功能
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、接下來就是針對(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ì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue.js?的計(jì)算屬性和偵聽器詳解(提升數(shù)據(jù)處理與交互的關(guān)鍵工具)
在Vue.js開發(fā)中,計(jì)算屬性與偵聽器是極為關(guān)鍵的特性,它們極大地提升了數(shù)據(jù)處理與交互邏輯實(shí)現(xiàn)的便捷性和高效性,本文給大家介紹Vue.js?的計(jì)算屬性和偵聽器：提升數(shù)據(jù)處理與交互的關(guān)鍵工具,感興趣的朋友一起看看吧2025-04-04
vue基于session和github-oauth2實(shí)現(xiàn)登錄注冊(cè)驗(yàn)證思路詳解
通過 sessionId 可以在 session 表中獲取用戶的信息,此外,還利用 session 表實(shí)現(xiàn)了GitHub 的 OAuth2 第三方登錄,本文講解前端通過簡單的方式實(shí)現(xiàn)一個(gè)基本的登錄注冊(cè)驗(yàn)證功能,感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了vue中如何去掉input前后的空格問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue+NodeJS實(shí)現(xiàn)大文件上傳的示例代碼
常見的文件上傳方式可能就是new一個(gè)FormData，把文件append進(jìn)去以后post給后端就可以了。但如果采用這種方式來上傳大文件就很容易產(chǎn)生上傳超時(shí)的問題。所以本文將利用Vue+NodeJS實(shí)現(xiàn)大文件上傳，需要的可以參考一下2022-05-05
這篇文章主要介紹了vue中輸入框事件的使用及數(shù)值校驗(yàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-cli的build的文件夾下沒有dev-server.js文件配置mock數(shù)據(jù)的方法
這篇文章主要介紹了vue-cli的build的文件夾下沒有dev-server.js文件配置mock數(shù)據(jù)的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的代碼詳解
這篇文章給大家介紹了ElementUI實(shí)現(xiàn)el-table列寬自適應(yīng)的詳細(xì)步驟,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-01-01
Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳的方法
WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以 HTML5為主 ， FLASH為輔 的現(xiàn)代 文件上傳組件 。這篇文章主要介紹了在Vue項(xiàng)目中使用WebUploader實(shí)現(xiàn)文件上傳,需要的朋友可以參考下2019-07-07
Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
Vue3優(yōu)雅的實(shí)現(xiàn)跨組件通信的常用方法總結(jié)
開發(fā)中經(jīng)常會(huì)遇到跨組件通信的場景,props?逐層傳遞的方法實(shí)在是太不優(yōu)雅了,所以今天總結(jié)下可以更加簡單的跨組件通信的一些方法,文中通過代碼實(shí)例講解的非常詳細(xì),需要的朋友可以參考下2023-11-11