当前位置:网站首页>vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
vue-codemirror基本用法:实现搜索功能、代码折叠功能、获取编辑器值及时验证
2020-11-06 20:42:00 【叫我詹躲躲】
昨天实现了一些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就编辑器顶部就可以出现搜索框。
![image.png](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODk1MzkzNjUyMzYtMmJjZjM3ZGEtMWVkZi00MjE3LWE2NjMtY2U5MGE3YzEyYTM1LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=520&margin=[object Object]&name=image.png&originHeight=1040&originWidth=1280&size=98603&status=done&style=none&width=640)
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](https://imgconvert.csdnimg.cn/aHR0cHM6Ly9jZG4ubmxhcmsuY29tL3l1cXVlLzAvMjAyMC9wbmcvMTQ4MTQ2LzE1ODk1NDA1NDMzMTItNDZjMjBiZDgtMTcwMC00OTJkLWFjMTUtYTBiMzI0ZGQ3NmY1LnBuZw?x-oss-process=image/format,png#align=left&display=inline&height=1038&margin=[object Object]&name=image.png&originHeight=1038&originWidth=1266&size=100464&status=done&style=none&width=1266)
总结:
今天主要是接着《教你轻松搞懂vue-codemirror的基本用法:主要实现代码编辑、验证提示、代码格式化》文章继续分享vue-codemirror的一些用法,主要实现了搜索、代码折叠等功能。这仅仅代表我个人的观点,如有错误,欢迎指正。
关注lovepythoncn
**
回复关键字:code2, 就可以获取源码地址
版权声明
本文为[叫我詹躲躲]所创,转载请带上原文链接,感谢
https://my.oschina.net/u/3995971/blog/4558936
边栏推荐
- 容联完成1.25亿美元F轮融资
- DevOps是什么
- Save the file directly to Google drive and download it back ten times faster
- 从海外进军中国,Rancher要执容器云市场牛耳 | 爱分析调研
- 中国提出的AI方法影响越来越大,天大等从大量文献中挖掘AI发展规律
- Filecoin最新动态 完成重大升级 已实现四大项目进展!
- 直播预告 | 微服务架构学习系列直播第三期
- Let the front-end siege division develop independently from the back-end: Mock.js
- hadoop 命令总结
- Aprelu: cross border application, adaptive relu | IEEE tie 2020 for machine fault detection
猜你喜欢
向北京集结!OpenI/O 2020启智开发者大会进入倒计时
“颜值经济”的野望:华熙生物净利率六连降,收购案遭上交所问询
Existence judgment in structured data
你的财务报告该换个高级的套路了——财务分析驾驶舱
使用 Iceberg on Kubernetes 打造新一代云原生数据湖
DevOps是什么
助力金融科技创新发展,ATFX走在行业最前列
Filecoin主网上线以来Filecoin矿机扇区密封到底是什么意思
PHP应用对接Justswap专用开发包【JustSwap.PHP】
I've been rejected by the product manager. Why don't you know
随机推荐
多机器人行情共享解决方案
Vuejs development specification
Thoughts on interview of Ali CCO project team
一篇文章带你了解CSS3圆角知识
Network security engineer Demo: the original * * is to get your computer administrator rights! 【***】
Tool class under JUC package, its name is locksupport! Did you make it?
Calculation script for time series data
2018中国云厂商TOP5:阿里云、腾讯云、AWS、电信、联通 ...
Character string and memory operation function in C language
How do the general bottom buried points do?
中国提出的AI方法影响越来越大,天大等从大量文献中挖掘AI发展规律
使用 Iceberg on Kubernetes 打造新一代云原生数据湖
Didi elasticsearch cluster cross version upgrade and platform reconfiguration
Process analysis of Python authentication mechanism based on JWT
WeihanLi.Npoi 1.11.0/1.12.0 Release Notes
In order to save money, I learned PHP in one day!
After reading this article, I understand a lot of webpack scaffolding
(1) ASP.NET Introduction to core3.1 Ocelot
事半功倍:在没有机柜的情况下实现自动化
Summary of common algorithms of linked list