本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(5)

vue-json-editor json编辑器

发布于2022-05-31 21:42     阅读(3541)     评论(0)     点赞(12)     收藏(3)


一、概述

现有一个vue项目,需要一个json编辑器,能够格式化json数据,同时也支持编辑功能。

vue-json-editor 插件就可以实现这个功能

二、vue-json-editor 使用

安装插件

npm install vue-json-editor --save

使用

test.vue

  1. <template>
  2.   <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
  3.     <vue-json-editor
  4.       v-model="resultInfo"
  5.       :showBtns="false"
  6.       :mode="'code'"
  7.      
  8.       @json-change="onJsonChange"
  9.       @json-save="onJsonSave"
  10.       @has-error="onError"
  11.     />
  12.     <br>
  13.     <el-button type="primary" @click="checkJson">确定</el-button>
  14.   </div>
  15. </template>
  16. <script>
  17.   // 导入模块
  18.   import vueJsonEditor from 'vue-json-editor'
  19.   export default {
  20.     // 注册组件
  21.     components: { vueJsonEditor },
  22.     data() {
  23.       return {
  24.         hasJsonFlag:true,  // json是否验证通过
  25.         // json数据
  26.         resultInfo: {
  27.           'employees': [
  28.             {
  29.             'firstName''Bill',
  30.             'lastName''Gates'
  31.             },
  32.             {
  33.               'firstName''George',
  34.               'lastName''Bush'
  35.             },
  36.             {
  37.               'firstName''Thomas',
  38.               'lastName''Carter'
  39.             }
  40.           ]
  41.         }
  42.       }
  43.     },
  44.     mountedfunction() {
  45.     },
  46.     methods: {
  47.       onJsonChange (value) {
  48.         // console.log('更改value:', value);
  49.         // 实时保存
  50.         this.onJsonSave(value)
  51.       },
  52.       onJsonSave (value) {
  53.         // console.log('保存value:', value);
  54.         this.resultInfo = value
  55.         this.hasJsonFlag = true
  56.       },
  57.       onError(value) {
  58.         // console.log("json错误了value:", value);
  59.         this.hasJsonFlag = false
  60.       },
  61.       // 检查json
  62.       checkJson(){
  63.         if (this.hasJsonFlag == false){
  64.           // console.log("json验证失败")
  65.           // this.$message.error("json验证失败")
  66.           alert("json验证失败")
  67.           return false
  68.         } else {
  69.           // console.log("json验证成功")
  70.           // this.$message.success("json验证成功")
  71.           alert("json验证成功")
  72.           return true
  73.         }
  74.       },
  75.     }
  76.   }
  77. </script>
  78. <style>
  79. </style>

插件参数说明:

  1. <vue-json-editor
  2.       v-model="resultInfo"  // 绑定数据resultInfo
  3.       :showBtns="false"  // 是否显示保存按钮
  4.       :mode="'code'"  // 默认编辑模式
  5.        // 显示中文,默认英文
  6.       @json-change="onJsonChange"  // 数据改变事件
  7.       @json-save="onJsonSave"  // 数据保存事件
  8.       @has-error="onError"  // 数据错误事件
  9.     />

相关说明:

resultInfo  默认绑定的变量,这个变量可以为空,编辑器会显示为{}

:showBtns 这里不显示保存按钮,为什么呢?原因有2个。1. 默认样式不好看。2. 只能当json数据正确,才能点击保存按钮,否则禁止点击。

json-change,json-save,has-error 这3个事件,是会实时触发的。

这里我额外加了一个检测方法,用来判断json数据是否正确。默认标记为true,当不正确时,会改变状态为false。

访问

点击确定,提示成功

 改为错误的,点击确定,会提示失败。

注意:这个json编辑会带有下来菜单,实际项目中,需要去除,比较用户误操作。

在实际使用中发现几个问题:

1. 输入中文时,传给后端的值不多

2. 输入大量json时,会有部分数据丢失。

因此,我们使用下面的编辑器bin-code-editor 

三、bin-code-editor

安装模块

npm install bin-code-editor -d

引入

在 main.js 中写入2行

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

test.vue

  1. <template>
  2.   <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
  3.     <b-code-editor v-model="jsonStr" :auto-format="true" :smart-indent="true" theme="dracula" :indent-unit="4" :line-wrap="false" ref="editor"></b-code-editor>
  4.     <br>
  5.     <el-button type="primary" @click="onSubumit">提交</el-button>
  6.   </div>
  7. </template>
  8. <script>
  9.   const jsonData =`{
  10.     "employees": [{
  11.       "firstName": "Bill",
  12.       "lastName": "Gates"
  13.     }, {
  14.       "firstName": "George",
  15.       "lastName": "Bush"
  16.     }, {
  17.       "firstName": "Thomas",
  18.       "lastName": "Carter"
  19.     }]
  20.   }`
  21.   export default {
  22.     data() {
  23.       return {
  24.         jsonStr:jsonData
  25.       }
  26.     },
  27.     methods: {
  28.       // 检测json格式
  29.       isJSON(str) {
  30.         if (typeof str == 'string') {
  31.           try {
  32.             var obj=JSON.parse(str);
  33.             if(typeof obj == 'object' && obj ){
  34.               return true;
  35.             }else{
  36.               return false;
  37.             }
  38.           } catch(e) {
  39.             return false;
  40.           }
  41.         }else if (typeof str == 'object'  && str) {
  42.           return true;
  43.         }
  44.       },
  45.       onSubumit(){
  46.         if (!this.isJSON(this.jsonStr)){
  47.           this.$message.error(`json格式错误`)
  48.           return false
  49.         }
  50.         this.$message.success('json格式正确')
  51.       }
  52.     }
  53.   }
  54. </script>
  55. <style>
  56. </style>

访问测试页面,效果如下:

输入错误的值,点击执行,会有提示

原文链接:https://blog.csdn.net/weixin_42232156/article/details/123014349




所属网站分类: 技术文章 > 博客

作者:听说你很拽

链接:http://www.qianduanheidong.com/blog/article/361088/e89b8cec0defa9e7d2de/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

12 0
收藏该文
已收藏

评论内容:(最多支持255个字符)