vue-codemirror基本用法：實現搜索功能、代碼摺疊功能、獲取編輯器值及時驗證

昨天實現了一些codemirror：基本的編輯代碼功能、插入變量功能、codemirror語法驗證功能、代碼格式化（由於主要是json數據，所以暫時沒引用其他組件，如果需要建議引用js-beautify，因爲查資料發現codemirror在新的版本中已經去掉autoFormatRange方法），如果想了解更多，請參考《教你輕鬆搞懂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就編輯器頂部就可以出現搜索框。

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)
    }
  }

效果如下圖：

總結：

今天主要是接着《教你輕鬆搞懂vue-codemirror的基本用法：主要實現代碼編輯、驗證提示、代碼格式化》文章繼續分享vue-codemirror的一些用法，主要實現了搜索、代碼摺疊等功能。這僅僅代表我個人的觀點，如有錯誤，歡迎指正。
關注lovepythoncn
**

回覆關鍵字：code2, 就可以獲取源碼地址