共计 1778 个字符,预计需要花费 5 分钟才能阅读完成。
背景
- 在应用 vue-json-pretty 展现 json 数据时,有时候咱们须要给特定的 key 加一些标注,对其进行一些扩大。
- 如上面的需要:查问进去的 json 数据,对局部的 key 标注等级,并且点击标注会关上对应的一个页面
批改计划
- 对 vue-json-pretty 源码进行批改,采纳的 1.7.1 版本
-
在 src —> components —> app.vue 中
-
第 39 到 44 行
<span v-if="currentDeep > 1 && !Array.isArray(parentData)" class="vjs-key" > {{prettyKey}}: </span>
改为
<span v-if="currentDeep > 1 && !Array.isArray(parentData)" class="vjs-key" v-html="keyFormatter(prettyKey)" />
-
第 99 到 104 行
<span v-if="parentData && currentKey && !Array.isArray(parentData)" class="vjs-key" > {{prettyKey}}: </span>
改为
<span v-if="parentData && currentKey && !Array.isArray(parentData)" class="vjs-key" v-html="keyFormatter(prettyKey)" />
-
在 57 到 78 行的 vue-json-pretty 中增加一个办法
:custom-key-formatter="customKeyFormatter"
-
在 methods 办法中增加 keyFormatter
keyFormatter (key) { return this.customKeyFormatter ? this.customKeyFormatter(key, this.path) : `${key}:` },
-
在 props 中增加 customKeyFormatter
customKeyFormatter: { type: Function, default: null },
-
- 以上改完后就能够通过 npm run build 办法打包资源,打包资源前得先 npm i 装置对应的依赖
应用形式
// 引入组件
import VueJsonPretty from '@/../public/changedNodeModules/vue-json-pretty';
import 'vue-json-pretty/lib/styles.css';
// 注册组件
components: {VueJsonPretty,}
<!-- 应用组件 -->
<VueJsonPretty :path="'res'" :data="executeResult" :custom-key-formatter="customKeyFormatter" />
-
executeResult 是 json 数据;customKeyFormatter 是对 key 自定的函数
customKeyFormatter(key, path) { // key 是须要自定义的 key;path 是 key 对应的门路,到时打印进去就晓得了 // 有时候须要对 path 依据后盾给定的数据进行解决 const np = path.replace(/\[.*?]/g, '').replace(/^(res.)(hits.)+(_source.)+/g,''); const l = this.leave[np]; if (l) {const ll = l.split('@'); let color; switch (ll[0]) { case 'S1': color = '#409eff'; break; case 'S2': color = '#e6a23c'; break; case 'S3': case 'S4': case 'S5': color = '#FF4949'; break; } // 依据门路自定义 key return `${key}<a target="_blank" href="${ll[1]}" style="user-select:none;background: ${color};color: #fff; padding: 0 4px; font-weight: bolder">${ll[0]}</a> :`; } else {return key + ':';} },
- 具体应用文档请参考 vue-json-pretty
正文完