一、安装插件
直接看效果: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>