文档地址: https://www.vue-json-helper.com
演示地址: https://demo.vue-json-helper.com
组件库以来vue,如果想使用,请确保在vue环境中,首先创建vue项目,如果直接在项目中使用,请跳过此步骤。
安装Vue/Cli
- npm安装
npm i -g @vue/cli
- 创建Vue项目
vue create vue-json-test
在Vue项目下进行组件库安装。
cd vue-json-test
项目的组件以来ElementUI,暂没搞明白怎么把ElementUI组件按需打包到自己的组建中,所以安装过程也要安装ElementUI,如果你的项目中包含ElementUI,恭喜你,可以跳过此步骤。
- npm安装
npm i element-ui -S
- npm安装
npm install vue-json-helper
在 main.js 中写入以下内容:
import Vue from 'vue';
import App from './App.vue';
import ElementUI from 'element-ui';
import VueJsonHelper from 'vue-json-helper'
import 'element-ui/lib/theme-chalk/index.css';
import 'vue-json-helper/vue-json-helper.css';
Vue.use(ElementUI);
Vue.use(VueJsonHelper)
new Vue({
el: '#app',
render: h => h(App)
});
- VueJsonHelper说明:
- 第一个蓝色标签为节点名,如果再names中配置英文/中文映射,即反馈中文名称。
- 第二个输入框为当前节点的键。
- 第三个选择框为当前节点的类型,提供String/Number/Boolean/Object/Array类型。
- 第四个为当前节点的值,节点类型为Object或Array的不提供输入值。
- 当节点类型为Object或者Array时,提供 + 新增子节点,除了Root节点不存在 x 键,其他节点均有 x 键进行删除操作。
当前代码主要展示VueJsonHelper的使用用例。
<template>
<div class="app">
<VueJsonHelper
:size="size"
:names="names"
:json-str="jsonStr"
:root-flag="rootFlag"
:open-flag="openFlag"
:back-top-flag="backTopFlag"
@jsonListener="jsonListener"
/>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
size: 'small',
names: [
{key: "Root", name: "根节点"},
{key: "name", name: "姓名"},
{key: "age", name: "年龄"},
{key: "flag", name: "标示"},
{key: "EduexPerience", name: "教育经历"},
{key: "year", name: "年份"},
{key: "education", name: "学历"},
],
rootFlag: true,
openFlag: true,
backTopFlag: false,
jsonStr: JSON.stringify({
name: '张三',
age: 16,
flag: true,
EduexPerience: [
{year: "2006", education: "高中"},
{year: "2010", education: "大学"},
]}),
};
},
methods: {
/**监听json数据变化 */
jsonListener(json) {
console.log(json);
},
},
};
</script>
参数 | 备注 | 类型 | 必填 | 可选值 | 默认值 |
---|---|---|---|---|---|
names | 设置组件的key对应的中文名称 | Array | 否 | - | - |
json-str | 设置需要构建的string类型的json | String | 是 | - | - |
root-flag | 设置是否展示Root根节点 | Boolean | 否 | true/false | true |
open-flag | 设置是否展开全部节点 | Boolean | 否 | true/false | true |
border-flag | 设置是否展示边框 | Boolean | 否 | true/false | true |
shadow-flag | 设置是否展示边框阴影 | Boolean | 否 | true/false | false |
back-top-flag | 设置是否展示返回顶点的按钮 | Boolean | 否 | true/false | false |
事件 | 备注 | 参数 |
---|---|---|
jsonListener | json格式或内容改变的监听器,json改变后,将会调用这个方法将最新的json返回。 | json |