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, 就能夠獲取源碼地址