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>

大概效果的如下:

相关推荐
待磨的钝刨34 分钟前
【格式化查看JSON文件】coco的json文件内容都在一行如何按照json格式查看
开发语言·javascript·json
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄7 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半9 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
MarcoPage9 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
工业互联网专业9 小时前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计