首页 >  vue >  vue3安装vue-json-viewer实现json格式化

vue3安装vue-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>