Vue实现JSON编辑器_vue json 编辑器

效果图

1、默认状态

2、全屏状态

功能介绍

1、按键功能

2、细节介绍

• 右侧提示按钮为绿色表示格式正确，为红色则错误

• 支持显示行号并与右侧文本域滚动条联动

• 最大化时支持实时预览json对象，同时支持错误提示和定位

• 点击中括号、花括号、大括号时会高亮显示另一半
• 支持括号、双引号自动补全

组件结构

JsonEditor.vue

<template>
  <div ref="center">
    <div
      style="
        border: 1px solid #bac6e7;
        padding-left: 5px;
        padding-right: 5px;
        display: flex;
        justify-content: space-between;
      "
    >
      <div style="display: flex; align-items: center">
        <eye-outlined class="icon_hover" @click="isPreview = true" title="预览JSON配置" />
        <div style="height: 18px; border: 1px solid #858585; margin: 0 3px"></div>
        <tool-outlined class="icon_hover" @click="prettyFormat(viewJsonStr)" title="格式化" />
        <div style="height: 18px; border: 1px solid #858585; margin: 0 3px"></div>
        <line-outlined
          class="icon_hover"
          @click="viewJsonStr = viewJsonStr.replace(/\s+/g, '')"
          title="去除空格"
        />
        <div
          style="
            display: flex;
            align-items: center;
            border-left: 2px solid #858585;
            height: 18px;
            margin: 0 3px;
            padding: 0 3px;
          "
        >
          <fullscreen-outlined
            v-if="!isFullScreen"
            class="icon_hover"
            @click="fullScreen"
            title="全屏"
          />
          <fullscreen-exit-outlined v-else class="icon_hover" @click="fullScreen" title="退出" />
        </div>
      </div>
      <div>
        <check-circle-outlined title="格式正确" v-if="isPass" style="color: #63ca31" />
        <info-circle-outlined title="格式错误" v-else style="color: red" />
      </div>
    </div>
    <div class="edit-container">
      <textarea
        wrap="off"
        cols="1"
        id="leftNum"
        disabled
        onscroll="document.getElementById('rightNum').scrollTop = this.scrollTop;"
      &