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>

大概效果的如下:

相关推荐
ggdpzhk1 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
活宝小娜6 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow6 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
刚刚好ā7 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
为什么每天的风都这么大8 小时前
Vscode/Code-server无网环境安装通义灵码
ide·vscode·阿里云·编辑器·ai编程·code-server
会发光的猪。9 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客9 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js
周全全10 小时前
Spring Boot + Vue 基于 RSA 的用户身份认证加密机制实现
java·vue.js·spring boot·安全·php
ZwaterZ10 小时前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue