vue-codemirror基本用法：实现搜索功能、代码折叠功能、获取编辑器值及时验证

墨蓝 2023-03-14 03:17 5阅读 0赞

> 昨天实现了一些codemirror：基本的编辑代码功能、插入变量功能、codemirror语法验证功能、代码格式化（由于主要是json数据，所以暂时没引用其他组件，如果需要建议引用js-beautify，因为查资料发现codemirror在新的版本中已经去掉autoFormatRange方法），如果想了解更多，请参考《[教你轻松搞懂vue-codemirror的基本用法：主要实现代码编辑、验证提示、代码格式化》][vue-codemirror]，今天接着昨天的功能代码继续，主要分享vue-codemirror实现搜索功能、代码折叠功能、获取编辑器值及时验证功能。

### 1. vue-codemirror 搜索功能 ###

#### 1.1 在原来的基础上需要引入需要的资源 ####

import 'codemirror/addon/scroll/annotatescrollbar.js'
    import 'codemirror/addon/search/matchesonscrollbar.js'
    import 'codemirror/addon/search/match-highlighter.js'
    import 'codemirror/addon/search/jump-to-line.js'
    
    import 'codemirror/addon/dialog/dialog.js'
    import 'codemirror/addon/dialog/dialog.css'
    import 'codemirror/addon/search/searchcursor.js'
    import 'codemirror/addon/search/search.js'

其实引入这些资源基本的搜索功能已经实现，按ctrl+F 或者command+F就编辑器顶部就可以出现搜索框。  
![image.png][]

#### 1.2 点击按钮实现搜索效果 ####

产品考虑到有的人可能不知道用快捷键，就设计了一个按钮，点击进行搜索，点击搜索按钮，搜索框出现在编辑器的顶部。searchCode就是对应的点击按钮事件时候调用的方法。

methods: { 
    	searchCode (e) { 
          this.codemirror.execCommand('find') //触发
      }
    }

### 2. vue-codemirror折叠功能 ###

折叠功能刚开始做这个编辑器的时候就想加上，但是试了一下没成功，因为配置比较多，还需要引入资源，所以这个放到最后才加。

#### 2.1 vue-codemirror折叠需要引入的资源，既有样式文件又有js文件，这些都是不可少的 ####

// 折叠
    import 'codemirror/addon/fold/foldgutter.css'
    import 'codemirror/addon/fold/foldcode'
    import 'codemirror/addon/fold/foldgutter'
    import 'codemirror/addon/fold/brace-fold'
    import 'codemirror/addon/fold/comment-fold'

#### 2.2 vue-codemirror折叠需要的基本配置 ####

{ 
    	 foldGutter: true,
       lineWrapping: true,
       gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
    }

vue-codemirror折叠不需要扩展什么功能，只需要引入需要资源和配置好初始化的配置参数即可。

### 获取编辑器值及时验证功能 ###

其实这个功能就是在vue-codemirror代码编辑器值出现语法错误的时候，及时按钮变成不可点击状态，当值没有啥错误的时候，提交按钮为可点击状态，没找到更好的获取编辑器验证状态的值，只能自己想了一个小捷径，判断是否有错误的代码，用watch监听数据，当数据发生变化的时候，看是否有错误存在。实现代码如下：

watch: { 
        jsonData (val) { 
          this.checkValid()
        }
      },
      methods: { 
      checkValid () { 
          setTimeout(() => { 
            this.codemirror.refresh()
            const container = this.$refs.codeMirror
            const len = container.querySelectorAll('.CodeMirror-lint-marker-error').length
            this.isValid = !!len && len > 0
          }, 1000)
        }
      }

效果如下图：  
![image.png][image.png 1]

### 总结： ###

今天主要是接着《[教你轻松搞懂vue-codemirror的基本用法：主要实现代码编辑、验证提示、代码格式化》][vue-codemirror]文章继续分享vue-codemirror的一些用法，主要实现了搜索、代码折叠等功能。这仅仅代表我个人的观点，如有错误，欢迎指正。  
关注**lovepythoncn**  
\*\*  
![qrcode\_for\_gh\_4d3763fa9780\_258 (1).jpg][qrcode_for_gh_4d3763fa9780_258 _1_.jpg]  
回复关键字：code2, 就可以获取源码地址

[vue-codemirror]: https://blog.csdn.net/lfcss/article/details/106125784
[image.png]: /images/20230312/80bfbb67c23f4691bb763a34239be54d.png
[image.png 1]: /images/20230312/7680a5cf9e0746c9bbe22a138e2586c7.png
[qrcode_for_gh_4d3763fa9780_258 _1_.jpg]: /images/20230312/43247c1a17bc48058f5aab425174e3b4.png