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

一、安装插件

直接看效果：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>