Vue-JSON编辑器组件的简单使用

文章目录

背景
效果预览
具体实现
- 相关依赖
- Vue部分
- Js部分

背景

有些时候我们系统的配置、为了方便会以JSON的形式保存使用，或者其他需要修改JSON的场景，一款方便好用的编辑器就显得很重要了，本文采用的是vue-json-editor组件。

效果预览

可以看到数据层级非常清晰，还可以选择对齐方式、切换文本、表单、树形等。

具体实现

Vue部分

<el-form-item label="数据内容" prop="configContent"><vue-json-editorstyle="height: 600px"v-model="jsonEditorValue":showBtns="false":mode="'code'"lang="zh"/>
</el-form-item>

Js部分

import vueJsonEditor from 'vue-json-editor'components: { vueJsonEditor }// 这里将JSON对象转换为JSON字符串
let jsonStr = JSON.stringify(this.jsonEditorValue)/** 判断最终保存数据是否为正确的JSON格式 */
isJson(str) {if (typeof str == 'string') {try {let obj = JSON.parse(str)return !!(typeof obj == 'object' && obj)} catch (e) {console.log('error：' + str + '!!!' + e)return false}}console.log('It is not a string!')
}

Vue-JSON编辑器组件的简单使用相关推荐

antd picker 使用如何_如何基于jsoneditor二次封装一个可实时预览的json编辑器组件?(react版)...
前言做为一名前端开发人员,掌握vue/react/angular等框架已经是必不可少的技能了,我们都知道,vue或react等MVVM框架提倡组件化开发,这样一方面可以提高组件复用性和可扩展性,另一 ...
【一个简单的vue公式编辑器组件】
vue 一个简单的公式编辑器组件示例一个基于vue实现数据统计公式的基本功能. 新建一个 formula.vue 组件, 使用 <formula ref="formulaPage& ...
vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能
一.vue-seamless-scroll是什么? vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样 ...
Vue图片浏览组件v-viewer简单应用
v-viewer 用于图片浏览的Vue组件,支持旋转.缩放.翻转等操作,基于viewer.js. 安装 npm install v-viewer 使用引用插件 main.js import View ...
一个能在vue3中运行的JSON编辑器，能展示JSON数据的高亮，打开时有默认数据
以下是一个可以在Vue 3中运行的JSON编辑器组件.它使用了元素来输入JSON数据,并使用JSON.parse()将输入的JSON数据解析为JavaScript对象.解析成功后,将在编辑器下方展示高 ...
Vue和React组件之间的传值方式
在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些? 组件间的传值方式组件的传值场景无外乎以下几种: 父子之间兄弟之间多层级之间(孙子祖父或者更多) 任意组件之间父子之间 ...
# Vue 中 JSON 编辑器使用
Vue 中 JSON 编辑器使用文章目录 Vue 中 JSON 编辑器使用背景描述 vue-json-edit 安装依赖测试页面效果图 bin-code-editor 安装依赖测试页面效果 ...
Vue引用其他组件，但组件某些部分不需要时的简单处理
项目开发时,我们会把多个地方重复使用的模块抽象成组件,提供给大家一起使用,但是使用组件的时候偶尔会遇见一些问题,比如说组件里只有某些东西自己并不需要,这个时候我们可以对组件进行简单的修改,而不影响其他 ...
Vue 组件封装简单案例——小白入门
今天初步接触了 Vue 中的组件封装,将写好的公用组件封装在 src 的 components 文件夹下,在 views 文件夹下的 .vue 文件可以进行调用以最简单的 button 按钮封装为例 ...
vue父子组件传值简单了解vuex
一.vue的父子组件之间是如何传值的? 首先呢,需要说说的是,vue既然有双向绑定,那为何会有父子组件之间的传值问题?这个问题也简单,vue的组件会供其他的vue页面进行调用,如果数组都是双向绑定的话 ...

Vue-JSON编辑器组件的简单使用

文章目录

背景

效果预览

具体实现

相关依赖

Vue部分

Js部分

Vue-JSON编辑器组件的简单使用相关推荐

最新文章

热门文章