山西网站建设价格项目推广网站

背景

最近在进行vue2项目升级为vue3。
在项目中需要获取json某些字段的路径，vue2中使用JSONPathPicker ，但是该插件不支持vue3，vue3中也没有相应的模块有该功能。

实现目标：

原vue2中JSONPathPicker实现的功能：

查找候选插件

1. json-tree-view-vue3 git仓库地址
   官方文档中，说可以通过selected事件，获取相应的路径：

   • 测试代码：

     <template><div class="demo"><JsonTreeView :json="json" v-on:selected="s" /></div>
     </template><script>
     /* eslint-disable */
     import { JsonTreeView } from "json-tree-view-vue3";
     import 'json-tree-view-vue3/dist/style.css'
     const ss = '{"string":"text","number":123,"boolean":true,"null":null,"array":["A","B","C"],"object":{"prop1":"value1","nestedObject":{"prop2":"value2"}}}'export default {name : 'demo',components:{"JsonTreeView":JsonTreeView,},data () {return {json:ss};},methods:{s(a) {console.log(a )console.log(Object.keys(a) )console.log(a.path )console.log(typeof(a))},}
     }
     </script><style scoped></style>

   • 测试效果：
     
   • 注意事项：
     1. 可以直接将字符串传至改组件；
     2. 只能获取最底层字段的路径，
   • 测试结论：不能满足当前需求

2. vue-json-pretty git仓库地址
   官方文档说该组件可以监听节点点击事件，先试下

   • 测试代码：

     <template><div class="demo"><vue-json-pretty :data="json" rootPath="$" :selectOnClickNode="true"  :editable="true":highlightSelectedNode="true" v-on:nodeClick="s" /></div>
     </template><script>
     /* eslint-disable */
     import VueJsonPretty from "vue-json-pretty";
     const ss = JSON.parse('{"string":"text","number":123,"boolean":true,"null":null,"array":["A","B","C"],"object":{"prop1":"value1","nestedObject":{"prop2":"value2"}}}');export default {name : "demo",components:{"vue-json-pretty":VueJsonPretty},data(){return {json : ss}},methods:{s(a) {console.log(a )console.log(Object.keys(a) )console.log(a.path )console.log(typeof(a))}}
     }
     </script><style scoped></style>
     

   • 测试效果
     

   • 使用注意事项：

     1. 插件传入的数据需要是json对象
     2. 需要指定根路径为$
     3. 如果需要编辑内容，设置参数editable为True

   • 测试结论：满足当前需求

   最终的实现的替换效果：