添加json代码格式化工具

package.json

@@ -16,6 +16,7 @@
     "echarts": "^5.3.2",
     "element-ui": "^2.15.8",
     "js-md5": "^0.7.3",
+    "json-formatter-js": "^2.3.4",
     "mavon-editor": "^2.10.4",
     "moment": "^2.29.1",
     "mui-player": "^1.6.0",
@@ -24,6 +25,7 @@
     "sass-loader": "^10.0.1",
     "vue": "^2.6.11",
     "vue-clipboard2": "^0.3.3",
+    "vue-json-viewer": "^2.2.22",
     "vue-router": "3.5.2"
   },
   "devDependencies": {

src/main.js

@@ -11,10 +11,11 @@ import 'element-ui/lib/theme-chalk/index.css'
 import moment from "moment"
 
 import VueClipboard from "vue-clipboard2";
-
+import JsonViewer from 'vue-json-viewer'
 
 Vue.prototype.$moment = moment;
 Vue.use(VueClipboard)
+Vue.use(JsonViewer)
 
 
 Vue.use(ElementUI)

src/page/CssTools.vue

@@ -85,6 +85,11 @@ export default {
 
 
 
+
+
+
+
+
     cssFormat(){
       this.formatCssCode = cssbeautify(this.nativeCssCode)
 

src/page/JsonTools.vue

@@ -0,0 +1,122 @@
+<template>
+
+  <div class="container">
+
+    <!--工具简介-->
+    <div class="tools-intro" :style="{backgroundImage:'url('+require('../assets/banner-tools.png')+')'}" style=" background-size:100% 100%;">
+      <div style="width: 1600px; align-items: center; margin: 0 auto; " >
+        <el-image style="width: 100px; height: 100px; float: left" :src="require('@/assets/icon/CSS3.svg')"></el-image>
+        <div style="position: relative;  left: 40px">
+          <p style="font-size: 25px; font-weight: 600">JSON代码格式化工具</p>
+<!--          <p>JSON格式化采用json-formatter-js插件实现</p>-->
+
+        </div>
+
+      </div>
+
+
+    </div>
+
+    <div style="width:1600px; margin:40px auto">
+      <h3>操作区</h3>
+      <el-button @click="Format" type="primary">格式化代码</el-button>
+
+    </div>
+
+    <!--代码框-->
+    <div style="width: 1600px;display: flex; justify-content: space-between;">
+
+      <div style="width: 49%">
+        <h3>待格式化JSON</h3>
+        <el-input class="inputCode" v-model="nativeCode"
+                  type="textarea"
+                  :rows="20"></el-input>
+      </div>
+
+      <div style="width: 49%">
+        <h3>格式化JSON</h3>
+        <json-viewer :value="formatCode"
+                     copyable style="min-height: 431px"
+                     ></json-viewer>
+
+      </div>
+    </div>
+
+
+
+
+
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "JsonTools",
+  data(){
+    return{
+      nativeCode: '',
+      formatCode:'',
+
+    }
+  },
+  methods:{
+
+
+    Format(){
+
+
+      // this.formatCode = JSON.stringify((this.nativeCode),null,2);
+
+      this.formatCode = JSON.parse(this.nativeCode)
+      console.log(typeof this.formatCode)
+    },
+
+
+
+
+
+  }
+}
+</script>
+
+<style scoped>
+.container{
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  /*justify-content: center;    !* 垂直居中 *!*/
+  align-items: center;        /* 水平居中 */
+  background: #FAFCFF;
+  height: 100%;
+}
+
+
+.tools-intro{
+
+  width: 100%;
+  height: 200px;
+  box-shadow: 0px 0px 40px 0px rgb(217, 224, 234);
+
+
+}
+
+
+
+/deep/ .el-textarea__inner {
+  font-family: sans-serif !important;
+
+}
+
+/deep/.el-button.el-button--primary{
+  background:#4154F1
+}
+
+/deep/.el-button.el-button--success{
+  background:#28bd6c
+}
+
+
+
+</style>

src/page/ToolsHome.vue

@@ -22,7 +22,7 @@
           <p class="tools-text">CSS代码格式化工具</p>
         </div>
 
-        <div class="tools-card" @mouseover="changeImg(1)" @mouseout="resetImg(1)">
+        <div class="tools-card" @mouseover="changeImg(1)" @mouseout="resetImg(1)" @click="openUtilsPage('/JsonTools')">
           <img  class="tools-img" :src="buttonImgList[1]" >
           <p class="tools-text">JSON代码格式化工具</p>
         </div>

src/router/index.js

@@ -15,6 +15,12 @@ let routes = [
     component: () => import("@/page/CssTools"),
     name: 'CssTools',
   },
+
+  {
+    path: '/jsonTools',
+    component: () => import("@/page/JsonTools"),
+    name: 'JsonTools',
+  },
   // {
   //   path: '/404',
   //   component:() => import("@/components/404"),