【vue】集成jsoneditor实现自己的json工具

最新推荐文章于 2026-04-19 10:10:59 发布

原创最新推荐文章于 2026-04-19 10:10:59 发布 · 1.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #json #javascript

该文章已生成可运行项目，

安装jsoneditor

npm i jsoneditor

编写代码

<template>
  <div class="jsonutil-container">
    <div class="left-box c-shadow">
      <textarea v-model="fromStr"></textarea>
    </div>
    <div class="right-box" id="jsoneditor">

    </div>
  </div>
</template>

<script setup>
import {ref, onMounted, watchEffect} from 'vue'
import JSONEditor from 'jsoneditor'

const fromStr = ref('{\n' +
    '            "Array": [1, 2, 3],\n' +
    '            "Boolean": true,\n' +
    '            "Null": null,\n' +
    '            "Number": 123,\n' +
    '            "Object": {"a": "b", "c": "d"},\n' +
    '            "String": "Hello World"\n' +
    '}')
let editor = null
onMounted(() => {
  const container = document.getElementById('jsoneditor');
  const options = {
  };
  editor = new JSONEditor(container, options);
  editor.set(JSON.parse(fromStr.value))
})


watchEffect(() => {
  if (fromStr.value.length != 0) {
    try {
      editor.set(JSON.parse(fromStr.value))
    } catch (e) {
      console.log(e)
    }

  }

})

</script>

<style scoped lang="less">
.jsonutil-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
}


.left-box{
  width: 35%;
  margin: 0 auto;
  height: 80%;
  background-color: #fff;
}
.right-box{
  width: 60%;
  height: 80%;
}

.left-box > textarea{
  width: 100%;
  height: 100%;
  border: none;
  font-size: 1em;
}

.left-box > textarea:focus,
.right-box > textarea:focus {
  border: none;
  outline: none;
}
</style>