网站推广做什么,做网站要源码吗,广州网站优,注册公司代理网更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio
演示地址#xff1a;RuoYi-Nbcio后台管理系统
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码#xff1a; https://gitee.com/nbacheng/n…更多ruoyi-nbcio功能请看演示系统
gitee源代码地址
前后端代码 https://gitee.com/nbacheng/ruoyi-nbcio
演示地址RuoYi-Nbcio后台管理系统
更多nbcio-boot功能请看演示系统
gitee源代码地址
后端代码 https://gitee.com/nbacheng/nbcio-boot
前端代码https://gitee.com/nbacheng/nbcio-vue.git
在线演示包括H5 http://122.227.135.243:9888
上面代码按钮显示相应的代码与界面
el-button iconel-icon-view typetext clickCode代码/el-button
Code() {this.operationType Codelet data {fileName: undefined,type: file}this.generate(data);},
generate(data) {const func this[exec${titleCase(this.operationType)}]this.generateConf datafunc func(data)},
上面实现是调用了下面的方法就是execCode方法
ƒ execCode(data) { this.AssembleFormData(); this.drawerVisible true; }
其中AssembleFormData就把配置信息与要显示的字段放进去
AssembleFormData() {this.formData {...this.formConf,fields: deepClone(this.drawingList)}},
通过开关显示这个下面的组件
form-drawer:visible.syncdrawerVisible:form-dataformDatasize100%:generate-confgenerateConf/
这个页面主要用到了两个组件样式优化组件beautifier和显示组件monaco-editor在打开el-drawer的时候就进行初始化了
onOpen() {const { type } this.generateConfthis.htmlCode makeUpHtml(this.formData, type)this.jsCode makeUpJs(this.formData, type)this.cssCode makeUpCss(this.formData)this.key new Date()loadBeautifier(btf {beautifier btfthis.htmlCode beautifier.html(this.htmlCode, beautifierConf.html)this.jsCode beautifier.js(this.jsCode, beautifierConf.js)this.cssCode beautifier.css(this.cssCode, beautifierConf.html)loadMonaco(val {monaco valthis.setEditorValue(editorHtml, html, this.htmlCode)this.setEditorValue(editorJs, js, this.jsCode)this.setEditorValue(editorCss, css, this.cssCode)if (!this.isInitcode) {this.isParser truethis.isParser (this.isInitcode true) this.runCode()}})})},
对于左边代码显示部分主要是下面部分处理为了避免一些问题下面注释了一些没用的信息
setEditorValue(id, type, codeStr) {// if (editorObj[type]) {// editorObj[type].setValue(codeStr)// } else {editorObj[type] monaco.editor.create(document.getElementById(id), {value: codeStr,theme: vs-dark,language: mode[type],automaticLayout: true})//}// ctrl s 刷新editorObj[type].onKeyDown(e {if (e.keyCode 49 (e.metaKey || e.ctrlKey)) {this.runCode()}})},
之前说过原来模拟显示采用iframe 加载的是提前写好的 html但这种方式对于新加的组件就不怎么友好了所以修改成如下方式了
div classview-borderparser v-showisParser :form-confformData submitsubmitForm :keykey refpreviewForm //div 效果图如下
