vue3--实现vue2插件JSONPathPicker的路径获取功能
背景
最近在进行vue2项目升级为vue3。
在项目中需要获取json某些字段的路径，vue2中使用JSONPathPicker ，但是该插件不支持vue3，vue3中也没有相应的模块有该功能。
实现目标：
原vue2中JSONPathPicker实现的功能：
查找候选插件
-
json-tree-view-vue3git仓库地址
官方文档中，说可以通过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> - 测试效果：
- 注意事项：
- 可以直接将字符串传至改组件；
只能获取最底层字段的路径，
- 测试结论：不能满足当前需求
- 测试代码：
-
vue-json-prettygit仓库地址
官方文档说该组件可以监听节点点击事件，先试下-
测试代码：
<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> -
测试效果
-
使用注意事项：
- 插件传入的数据需要是json对象
- 需要指定根路径为
$ - 如果需要编辑内容，设置参数
editable为True
-
测试结论：满足当前需求
-