vue使用vue-json-viewer插件展示JSON格式数据的方法
作者:一朵野花压海棠
这篇文章主要给大家介绍了关于vue使用vue-json-viewer插件展示JSON格式数据的相关资料,前端使用这个插件可以方便展现出json格式的数据,下载引入使用代码可直接使用,需要的朋友可以参考下
1、安装 vue-json-viewer插件
npm install vue-json-viewer --save
官网地址: https://www.npmjs.com/package/vue-json-viewer
2、引入插件并注册
2.1 全局注册组件
在全局 main.js 中引入,在 main.js 文件中添加:
import JsonViewer from 'vue-json-viewer' Vue.use(JsonViewer)
2.2 单个页面局部引入
import JsonViewer from 'vue-json-viewer' export default { components:{ JsonViewer } }
3、插件的基础使用
<json-viewer :value="JSON.parse(jsonStr)" :expand-depth="5" boxed sort :show-array-index="false" copyable > <template slot="copy"> <i class="el-icon-document-copy" title="复制"></i> </template> </json-viewer> .... data(){ return{ jsonStr:"{\r\n \"success\": true,\r\n \"code\": 200,\r\n \"msg\": \"操作成功\",\r\n \"data\": \"\"\r\n}" } }
4、插件可选配置说明
4.1 选项
属性 | 描述 | 默认值 |
---|---|---|
value | json对象的值,可以使用v-model,支持响应式 | 必填 |
expand-depth | 默认展开的层级 | 1 |
copyable | 展示复制按钮,默认文案为:copy、copied!, 你可以设置一个对象{copyText: ‘copy’, copiedText: ‘copied’} 来自定义复制按钮文案 | false |
sort | 按照key排序展示 | false |
boxed | 为组件添加一个盒样式 | false |
theme | 添加一个自定义的样式class用作主题 jv-light | |
expanded | 默认展开视图 | false |
timeformat | 自定义时间格式函数 | time => time.toLocaleString() |
preview-mode | 不可折叠模式,默认全部展开 | alse |
show-array-index | 是否显示数组索引 | true |
show-double-quotes | 展示key双引号 | false |
4.2 事件
事件 | 描述 | 值 |
---|---|---|
copied | 复制文本后的事件 | |
keyclick | 点击key的事件 |
4.3 Slots
名称 | 描述 | Scope |
---|---|---|
copy | 自定义拷贝按钮 | {copied: boolean} |
4.4 主题
有两个办法创建自定义主题, (e.g. my-awesome-json-theme):
- 添加 theme=“my-awesome-json-theme” JsonViewer的组件属性
- 添加 theme=“my-awesome-json-theme” JsonViewer的组件属性
// values are default one from jv-light template .my-awesome-json-theme { background: #fff; white-space: nowrap; color: #525252; font-size: 14px; font-family: Consolas, Menlo, Courier, monospace; .jv-ellipsis { color: #999; background-color: #eee; display: inline-block; line-height: 0.9; font-size: 0.9em; padding: 0px 4px 2px 4px; border-radius: 3px; vertical-align: 2px; cursor: pointer; user-select: none; } .jv-button { color: #49b3ff } .jv-key { color: #111111 } .jv-item { &.jv-array { color: #111111 } &.jv-boolean { color: #fc1e70 } &.jv-function { color: #067bca } &.jv-number { color: #fc1e70 } &.jv-number-float { color: #fc1e70 } &.jv-number-integer { color: #fc1e70 } &.jv-object { color: #111111 } &.jv-undefined { color: #e08331 } &.jv-string { color: #42b983; word-break: break-word; white-space: normal; } } .jv-code { .jv-toggle { &:before { padding: 0px 2px; border-radius: 2px; } &:hover { &:before { background: #eee; } } } } }
5、实现效果
总结
到此这篇关于vue使用vue-json-viewer插件展示JSON格式数据的文章就介绍到这了,更多相关vue-json-viewer展示JSON数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!