vue3安装vue-json-viewer实现json格式化_vue3-json-viewer

一、安装插件

直接看效果：json格式化

安装版本不宜过旧也不宜过新，针对vue3安装这个版本即可

yarn add vue-json-viewer;
 
 "dependencies": {
       "vue-json-viewer": "3",
  },

二、使用插件

<script>
import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css";
export default {
  components: {
    JsonViewer,
  },
}
</script>

注意的是，这里需要对绑定数据做一个类型校验，对不合法数据类型进行剔除，另外可以自定义格式化框内部的样式

详细实例：

<JsonViewer :style="{
            minHeight: mainRowHeight,
            maxHeight: mainRowHeight,
            overflow: 'auto',
            fontSize: `${fontSize}px`,
            fontWeight: fontWeight,
          }"
          :boxed="false"
          :sort="false"
          :expanded="true"
          :copyable="true"
          :show-array-index="false"
          :show-double-quotes="true"
          expand-depth="20"
          :value="getJSON()" ></JsonViewer>
 
<script>
 
import JsonViewer from "vue-json-viewer";
import "vue-json-viewer/style.css";//引入插件样式
export default {
   components: {
      JsonViewer,
  },
   data(){
    return{ 
        jsonValue:"",
        fontSize：“”，
        fontWeight:"",
        mainRowHeight:"",
     }
  },
  methods:{
      getJSON() {
          if (typeof this.jsonValue== "string") {
            try {
                var obj = JSON.parse(this.jsonValue);
                if (typeof obj == "object" && obj) {
                  return obj;
                }
           } catch (e) {
               console.log("error：" + this.jsonValue+ "!!!" + e);
               return "";
            }
         } else {
           return this.jsonValue;
         }
      },
   }
}
<script>