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>

大概效果的如下:

相关推荐
静听夜半雨6 分钟前
CANoe入门——3、新建LIN工程及LIN DataBase(LDF文件)的创建
网络·数据库·c++·编辑器
佛系菜狗27 分钟前
element-ui、element-plus表单resetFields()无效的坑
前端·javascript·vue.js
信号处理学渣42 分钟前
Git命令行中vim的操作
git·编辑器·vim
聪明的墨菲特i2 小时前
SQL进阶知识:九、高级数据类型
xml·数据库·sql·mysql·json·空间数据类型
梦境之冢3 小时前
在 Vue3 中封装的 Axios 实例中,若需要为部分接口提供手动取消请求的功能
javascript·vue.js
AAA顶置摸鱼4 小时前
使用 Pandas 进行多格式数据整合:从 Excel、JSON 到 HTML 的处理实战
json·excel·pandas
qq_456001654 小时前
在Vue3中,如何在父组件中使用v-model与子组件进行双向绑定?
前端·javascript·vue.js
Magnum Lehar7 小时前
ApophisZerg游戏引擎项目目录展示
人工智能·vscode·编辑器·游戏引擎
可爱的秋秋啊8 小时前
vue3,element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
HED11 小时前
VUE项目发版后用户访问的仍然是旧页面?原因和解决方案都在这啦!
前端·vue.js