vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
2020/5/17 11:26:35
本文主要是介绍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, 就可以获取源码地址
这篇关于vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南