Vue 中的 JSON 操作及展示

vue-json-viewer

vue-json-viewer 主要用于 JSON 展示。

官网

https://www.npmjs.com/package/vue-json-viewer

安装

npm install vue-json-viewer --save

引用

全局引用:

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

页面引用:

import JsonViewer from 'vue-json-viewer'

export default {
  components: { JsonViewer },
  data() {}
}

使用

<json-viewer :value="showtext" :expand-depth=4 copyable  sort></json-viewer>

参数

参数 描述 默认
value JSON 数据(可与 一起使用 v-model 必需的
expand-depth 在此深度下折叠块 1
copyable 显示复制按钮,您可以自定义刚刚设置的复制文本 {copyText: 'copy', copiedText: 'copied', timeout: 2000} 或设置 true 使用默认复制文本 false
sort 在显示之前对键进行排序 false
boxed 为组件添加花哨的 “盒装” 样式 false
theme 为主题添加自定义 CSS 类 jv-light
expanded 默认展开视图 false
timeformat 自定义时间格式功能 时间 => time.toLocaleString ()
preview-mode 无扩展模式 false