脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue实现codemirror代码编辑器

vue实现codemirror代码编辑器中的SQL代码格式化功能

 更新时间：2019年08月27日 14:15:51   作者：跌跌撞撞的博客  
这篇文章主要介绍了vue实现codemirror代码编辑器中的SQL代码格式化功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

vue实现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、下面截图就是格式化前与格式化后的区别

格式化代码前

格式化代码后

总结

以上所述是小编给大家介绍的vue实现codemirror代码编辑器中的SQL代码格式化功能,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

相关文章

  • vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式

    vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式

    这篇文章主要介绍了vue使用动态添加路由(router.addRoutes)加载权限侧边栏的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-06-06
  • 超级详细的Vue安装与配置教程

    超级详细的Vue安装与配置教程

    Vue web前端三大主流框架之一,是一套用于构建用户界面的渐进式框架,下面这篇文章主要给大家介绍了关于Vue安装与配置教程的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue实现二维码扫码功能(带样式)

    vue实现二维码扫码功能(带样式)

    最近接了一个移动端的项目，实现微信扫码功能，今天小编利用这个平台给大家分享vue实现二维码扫描功能的实现代码，需要的朋友参考下吧
    2021-08-08
  • VUE render函数使用和详解

    VUE render函数使用和详解

    这篇文章主要为大家介绍了VUE render函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-12-12
  • vue项目打包发布后接口报405错误的解决

    vue项目打包发布后接口报405错误的解决

    这篇文章主要介绍了vue项目打包发布后接口报405错误的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-07-07
  • Vue 组件间的样式冲突污染

    Vue 组件间的样式冲突污染

    本篇文章主要介绍了Vue 组件间的样式冲突污染，当多个样式出现时，就会导致样式冲突，本文介绍了具体解决方法
    2017-08-08
  • vite与xcode环境变量配置记录详解

    vite与xcode环境变量配置记录详解

    这篇文章主要为大家介绍了vite与xcode环境变量配置记录详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-09-09
  • 详解Vue3如何优雅的监听localStorage变化

    详解Vue3如何优雅的监听localStorage变化

    最近在研究框架，也仔细用了Vue3一些功能，所以本文就来和大家聊聊Vue3如何实现优雅的监听localStorage的变化，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06
  • Vue中实现v-for循环遍历图片的方法

    Vue中实现v-for循环遍历图片的方法

    这篇文章主要介绍了Vue中实现v-for循环遍历图片的方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue使用electron转换项目成桌面应用方法介绍

    Vue使用electron转换项目成桌面应用方法介绍

    Electron也可以快速地将你的网站打包成一个原生应用发布,下面这篇文章主要给大家介绍了关于Vue和React中快速使用Electron的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11

最新评论