在线体验

文档地址： 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/Cli官网

安装

  在Vue项目下进行组件库安装。

cd vue-json-test

1. 安装ElementUI

  项目的组件以来ElementUI，暂没搞明白怎么把ElementUI组件按需打包到自己的组建中，所以安装过程也要安装ElementUI，如果你的项目中包含ElementUI，恭喜你，可以跳过此步骤。

• npm安装

npm i element-ui -S

2. 安装VueJsonHelper

• 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说明：

1. 第一个蓝色标签为节点名，如果再names中配置英文/中文映射，即反馈中文名称。
2. 第二个输入框为当前节点的键。
3. 第三个选择框为当前节点的类型，提供String/Number/Boolean/Object/Array类型。
4. 第四个为当前节点的值，节点类型为Object或Array的不提供输入值。
5. 当节点类型为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 |