网站备案要如何取消,潜江网站设计公司,个人备案网站能做什么,php网站500错误前言
程序员用到IDE次数比较频繁#xff0c;比如vscode、idea等#xff0c;这些都是市场上比较流行的代码编辑器#xff0c;拥有非常全面的功能。但是有时候在项目开发上也会用到代码编辑器#xff0c;比如复杂的ArrayObject输入#xff0c;或者需要用到用户交互…前言
程序员用到IDE次数比较频繁比如vscode、idea等这些都是市场上比较流行的代码编辑器拥有非常全面的功能。但是有时候在项目开发上也会用到代码编辑器比如复杂的ArrayObject输入或者需要用到用户交互的代码逻辑或者需要用到json、yaml格式文件时的校验等等。本来也不了解只是接收到了项目需求于是开始慢慢了解以下为一点点实践不足之处敬请指出
官网链接
栗子
下载注意事项
vue2和vue3有专门的版本
vue2使用4/5以下的版本
vue3可使用6的版本
故不能使用
yarn add codemirror
他会安装最新的版本6
如果系统vue的版本为2故使用yarn add codemirror4
基本使用
文件引入
codemirror是基于javascript开发所以需要引入很多开发所需的js、css文件
vue-codemirror是一个vue组件按照组件的方式引入、注册即可
import { codemirror } from vue-codemirror;
// require styles
import codemirror/addon/fold/brace-fold;
import codemirror/addon/fold/foldcode;
import codemirror/addon/fold/foldgutter;
import codemirror/addon/fold/foldgutter.css;
import codemirror/lib/codemirror.css;
import codemirror/mode/javascript/javascript;
// JSON错误检查
import codemirror/addon/lint/lint.css;
import codemirror/addon/lint/lint.js;
// 需要依赖全局的jsonlint不是很优雅
import codemirror/addon/lint/json-lint.js;
import codemirror/addon/lint/yaml-lint.js;
//及时自动更新配置里面也需要设置autoRefresh为true
import codemirror/addon/display/autorefresh;
// 支持括号自动匹配
import codemirror/addon/edit/closebrackets.js;
import codemirror/addon/edit/matchbrackets.js;
// 引入dark主题
import codemirror/theme/duotone-dark.css;// 全屏
import codemirror/addon/display/fullscreen;引入json校验
// 引入jsonlint
import jsonlint from jsonlint-mod;beforeCreate() {window.jsonlint jsonlint;
},options配置
cmOptions: {mode: application/json, // 语言及语法模式theme: idea, // 主题autoRefresh: true, // 自动刷新line: true, // 显示函数lint: true, // 校验matchBrackets: true, // 括号匹配显示autoCloseBrackets: true, // 输入和退格时成对indentUnit: 2, // 缩进单位默认2lineWrapping: true, // 软换行tabSize: 4, // tab宽度lineNumbers: true, // 显示行数foldGutter: true,smartIndent: true, // 智能缩进gutters: [CodeMirror-linenumbers,CodeMirror-foldgutter,CodeMirror-lint-markers, // 实现语法报错],
},code使用
一般code传入时是Array, Object, String 所以需要将他进行json.stringify序列化用2个空
格作为缩进
code: {handler(newVal) {const str newVal || [];this.newCode JSON.stringify(str, null, 2);},immediate: true,
},高度自适应
this.$refs.cm.codemirror.setSize(100%, auto);设置代码只读
readOnly一般存在三种属性
true 不可编辑不可复制false 可编辑可复制nocursor 不可编辑可复制
this.$refs.cm.codemirror.setOption(readOnly, nocursor);高度计算
很多时候需要codemirror沾满剩余的高度有时候屏幕会涉及大小屏切换故涉及到元素监听高度自动计算功能主要使用ResizeObserver属性进行观察元素大小是否改变主要代码如下
created() {this.$nextTick(() {this.onResizeObserver();});
},
beforeDestroy() {const ele document.querySelector(.v-form);if (ele) {// 取消对class为v-form的元素进行观察this.resizeObserver.unobserve(ele);}
},
methods: {onResizeObserver() {const _this this;this.resizeObserver new ResizeObserver((entries) {_this.setHeight(_this.reHeight);});// 在表单的情况下resize自动计算高度const ele document.querySelector(.v-form);if (ele) {// 对class为v-form的元素进行观察this.resizeObserver.observe(ele);}},// 高度计算setHeight(fn) {if (this.readOnly) {return;}const panelHeight document.querySelectorAll(.panel)[0].getBoundingClientRect().height;const headerHeight document.querySelectorAll(.panel-header)[1].getBoundingClientRect().height;const content document.querySelector(.content);const fontSize getComputedStyle(window.document.documentElement)[font-size].replace(px, );const num 1.8 * fontSize * 3;const contentHeight content.getBoundingClientRect().height - num;let height contentHeight - panelHeight - headerHeight - fn();// console.log(height, height)if (height 300) {height 300;}this.$nextTick(() {this.$refs.cm.codemirror.setSize(100%, height);});},
},栗子
https://codesandbox.io/s/vue-codemirror-json-editor-forked-yvf11d?file/src/components/JsonEditor.vue:185-229
大概实现了以下几个功能
json校验高度自动计算codemirror占满剩余高度高度自适应高度根据内容撑开代码只读readOnly主题切换代码自动更新
踩坑记录
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
大概包括以下几种原因
import语句导入组件时from后面的路径写错注册组件时括号内的组件名称写错与import声明的不一致注册组件关键字components写错导致无法使用使用组件时名称写错与注册组件的名字不一致使用组件时没有使用 / 反斜杠结尾
codemirror初始化赋值无法显示问题
// 引入自动刷新文件
**import codemirror/addon/display/autorefresh**cmOptions: {// 语言及语法模式mode: application/json,// 主题theme: duotone-dark,**autoRefresh: true, // 自动刷新**// 显示函数line: true,lint: true, // 校验matchBrackets: true, // 括号匹配显示autoCloseBrackets: true, // 输入和退格时成对indentUnit: 2, // 缩进单位默认2// 软换行lineWrapping: true,// tab宽度tabSize: 4,lineNumbers: true,lineWrapping: true,foldGutter: true,gutters: [CodeMirror-linenumbers,CodeMirror-foldgutter,CodeMirror-lint-markers, // 实现语法报错],
},参考文章
json格式校验
https://blog.51cto.com/u_15703146/5716514
https://www.cnblogs.com/proboxdu/p/16137537.html
https://codesandbox.io/s/vue-codemirror-json-editor-forked-yvf11d
codemirror文章
https://codemirror.net/
