Vue 中的 JSON 操作及展示

发表于 2021-09-14 分类于 Vue 阅读次数： Valine：

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`