vue中使用 json编辑器

复制代码
<template>
  <div class="stringTest">
        <vue-json-editor
          v-model="vstringData"    //编辑器中的内容
          :showBtns="false"        // 保存按钮
          mode="code"
          lang="zh"
          :expanded-on-start="true"
          @json-change="onJsonChange"  //改变内容时触发
          @json-save="onJsonSave"      //点击保存按钮
          @has-error="onError"         //校验json内容
        />
  </div>
</template>

<script>

export default {
  components: {  },
  data() {
    return {
      hasJsonFlag: true, // json是否验证通过
      vstringData: {
        //这个变量可以为空,编辑器会显示为{}
        style: {
          width: "300px",
          height: "30px",
          display: "flex",
        },
        data: {
          name: "任务名称",
          title: "",
          help: "请输入字符串类型的内容",
          default: "",
          widget: {},
          reg: {},
          isLoad: false,
          readonly: false,
        },
      },
    };
  },
  mounted() {
   
  },
  methods: {
    onJsonChange(value) {
      // 实时保存
      this.onJsonSave(value);
    },
    onJsonSave(value) {
      this.vstringData = value;
      this.hasJsonFlag = true;
    },
    onError(value) {
      this.$message.error(`json错误了${value}`);
      this.hasJsonFlag = false;
    },
    // 检查json
    checkJson() {
      if (this.hasJsonFlag === false) {
        this.$message.error("请输入格式正确的JSON数据!");
        return false;
      } else {
        return true;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.stringTest {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: lightyellow;

  /* jsoneditor右上角默认有一个链接,加css去掉 */
  /deep/ .jsoneditor-poweredBy {
    display: none !important;
  }

  /*修改高度*/
  /deep/ .jsoneditor-outer {
    height: 500px;
    margin-top: 10px;
  }
  /*修改菜单栏背景颜色,原始背景为蓝色,为了和整体页面风格一致,改为黑色*/
  /deep/ .jsoneditor-menu {
    background-color: #000;
    border-bottom: 1px solid #000;
  }

  /*修改输入框边框颜色*/
  /deep/.jsoneditor {
    border: 1px solid #000;
  }
}
</style>

大概效果的如下:

相关推荐
莲动渔舟15 小时前
国产编辑器EverEdit - 扩展脚本:让EverEdit支持“批量查找”功能
编辑器·emeditor·notepad·everedit
ElasticPDF-新国产PDF编辑器16 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Liudef0617 小时前
deepseek v3-0324实现SVG 编辑器
开发语言·javascript·编辑器·deepseek
JeJe同学17 小时前
教程:如何使用 JSON 合并脚本
json·coco
Billy Qin17 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌18 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光18 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs18 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石18 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
cypking20 小时前
解决 axios get请求瞎转义问题
vue.js