vue JsonEditor 编辑器

JsonEditor 官网

做后台管理系统需要展示可视化的Json，这样方便录入人员读取。如图所示⬇️

安装步骤

第一步：

npm i bin-code-editor -S
# or
yarn add bin-code-editor

第二步：在main.js中引入

import CodeEditor from 'bin-code-editor';Vue.use(CodeEditor);

第三步：在所需的.vue文件中

<template><div><b-code-editor v-model="formLeft.schemaJson" theme="material" ref="schemaEditor" class="editorWidth" /><Button @click="formatCodeForEditor('schemaEditor')">格式化代码</Button></div>

data数据： attributeJson: "",
methos方法:格式化代码的方法
formatCodeForEditor(type){switch(type){case 'datasetEditor':this.$refs['datasetEditor'].formatCode()break;case 'schemaEditor':this.$refs['schemaEditor'].formatCode()break;case 'attributeEditor':this.$refs['attributeEditor'].formatCode()break;case 'bandsEditor':this.$refs['bandsEditor'].formatCode()break;case 'relatedEditor':this.$refs['relatedEditor'].formatCode()break;}},

这就是简单的用于后台管理的Json展示的功能。

vue JsonEditor 编辑器相关推荐

antv-x6 vue流程图编辑器demo
antv-x6 vue流程图编辑器demo 效果如下: 效果如下: <template><div class="content"><div class ...
vue使用图像编辑器tui-image-editor
vue使用图像编辑器tui-image-editor 前言效果展示涂鸦裁剪标注旋转滤镜一.安装二.使用 1.快速体验 2.国际化 3.自定义样式 4.按钮优化 5.完整代码总结前言 ...
vue数学公式编辑器_将Vue包装器用于MathLive数学编辑器的示例
vue数学公式编辑器 Vue-Mathlive (vue-mathlive) The MathLive Vue wrapper provides a Vue component that implem ...
vue + mavon-editor编辑器
vue + mavon-editor编辑器我个人使用过 quill-editor编辑器和 mavon-editor编辑器这个编辑器的优点还挺多的,但我个人的观点预览功能很棒如果后续想了解 qu ...
Vue - Markdown编辑器
Hello,我是 Alex 007,一个热爱计算机编程和硬件设计的小白,为啥是007呢?因为叫 Alex 的人太多了,再加上每天007的生活,Alex 007就诞生了. 最近在做工作室的官网,需要一套 ...
vue获取编辑器纯文字_前端富文本编辑器 vue-html5-editor
1..项目创建与初始化在安装好脚手架的依赖后,要执行 npm install vue-html5-editor -S 来安装这个富文本插件,由于这个富文本插件的图标是依赖font-awesome.c ...
vue获取编辑器纯文字_vue中使用富文本编辑器
前端使用富文本编辑器的插件有很多,今天献上wangeditor的使用教程,教你如何在vue中使用富文本编辑器 wangeditor是一个萌新富文本编辑器,基于js和css,重点在于它轻量,如果你需要的 ...
vue项目编辑器保存代码后自动更新浏览器页面内容
第一步,现在用vue脚手架创建vue项目需要自己创建vue.config.js文件(注意,直接在项目创建vue.config.js文件即可),注意:(2019年10月后创建的新vue项目,之前的是we ...
【一个简单的vue公式编辑器组件】
vue 一个简单的公式编辑器组件示例一个基于vue实现数据统计公式的基本功能. 新建一个 formula.vue 组件, 使用 <formula ref="formulaPage& ...

vue JsonEditor 编辑器

vue JsonEditor 编辑器相关推荐

最新文章

热门文章