1.1.22 • Published 2 years ago
vue-json-helper v1.1.22
在线体验
文档地址: 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
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说明:
- 第一个蓝色标签为节点名,如果再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 |
1.1.22
2 years ago
1.1.21
2 years ago
1.1.20
2 years ago
1.1.19
2 years ago
1.1.18
2 years ago
1.1.17
2 years ago
1.1.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.1.10
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago