builder-vue-element

a vue admin packages

Build Setup

npm install builder-vue-element -D
npm install builder-vue -D
npm install container-vue-element -D
npm install element-ui -D

配置

1、引入builder-vue-element builder页面构建组件

import BuilderVueElement from 'builder-vue-element'
Vue.use(BuilderVueElement)

2、在builder-vue vuex中配置 容器组件

store.state.builderIndex = { template: '<bve-index/>' }

数据结构（必须）

此处数据通过路由对应的apiUrl返回数据

apiUrl json

参数	说明	类型	可选值	默认值	必填值	飞机票
items	页面显示项目(可以是form、table等数据对象) 。	array	—	—	是	formObject tableObject
config	配置参数	Object	—	—	—	config
title	页面标题	string	—	—	—	是

{
  'items':[
    0:{form Object},
    1:{table Object}
  ],
  'config':{
    'layout':{
      'xs': 24,
      'sm': 12,
      'md': 8,
      'lg': 6
    }
  }
  'title': '页面标题'
}

apiUrl config

参数	说明	类型	可选值	默认值	必填值	飞机票
layout	layout 布局参数参考饿了么框架布局 。	Object	—	{
'xs': 24,
'sm': 24,
'md': 24,
'lg': 24
}	—	—
refresh	请求数据后自动重新获取数据(false关闭是停止自动刷新 使用请求返回数据渲染页面)	boolean	—	—	true	—

{
  'config':{
    'layout':{
      'xs': 24,
      'sm': 12,
      'md': 8,
      'lg': 6
    },
    'refresh':fasle

items form Object

参数	说明	类型	可选值	默认值	必填值	飞机票
apiUrl	form项目使用到的通信url 。	Object	—	—	是	apiUrl
config	form项目配置参数 。	Object	—	—	是	config
data	form项目渲染数据（由多个数据对象构成的数组）	array	—	—	是	data
tabs	form项目使用tab标签页分组显示form 。	array/Object	—	—	—	—
tabsGroup	data数据进行tab分组的依据字段 。	string	—	—	使用tabs后必填	—
type	项目类型	string	form	form	是	—

{
  'apiUrl':{ apiUrl Object },
  'config': '{ config Object },
  'data': [
    0:{data Object},
    1:{data Object}
  ],
  'tabs':{
    'index' :'title name',
    'index1':'title name1',
  },
  tabsGroup:'group',
  type:'form'
}

items form apiUrl

参数	说明	类型	可选值	默认值	必填值	飞机票
submit	form项目数据提交保持通常地址 。	string	—	—	是	-

{
  'submit':'http://corecmf.dev/api/admin/system/system/update',
}

items form config

具体参考饿了么框架form表单使用说明 飞机票

参数	说明	类型	可选值	默认值	必填值	飞机票
labelWidth	表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值 。	string	—	—	-	-
inline	行内表单模式 。	boolean	-	false	-	-
labelPosition	表单域标签的位置 。	string	right/left/top	right	-	-
labelSuffix	表单域标签的后缀 。	string	—	—	-	-
formStyle	自定义form外部div样式 。	Object	—	—	-	-
formSubmit	自定义form提交按钮 。	Object	—	—	-	formSubmit
formReset	自定义form刷新按钮 。	Object	—	—	-	formReset

{
  labelWidth:"100px",
  inline:false,
  labelPosition:"right",
  labelSuffix:"",
  formStyle: {
    max-width:'600px'
  }
}

items form data formReset

参数	说明	类型	可选值	默认值	必填值	飞机票
label	标签文本 。	string	—	—	是	-

{


}

items form data formSubmit

参数	说明	类型	可选值	默认值	必填值	飞机票
label	标签文本 。	string	—	—	是	-

{


}

items form data

由于form item很多下面是公共部分说明 具体form组件参数请自行 饿了么ui参考 飞机票

参数	说明	类型	可选值	默认值	必填值	飞机票
label	标签文本 。	string	—	—	是	-
name	字段名 。	string	—	—	是	-
type	form item 元素样式(具体样式类型数据请飞机票) 。	string	text/checkbox/switch/number	—	是	text checkbox switch number
value	数据值 。	string/number/boolean	—	—	是	-
group	使用tabs数据分组字段 。	string/number	—	—	form启用tabs必填	-

{
  'label':'网站标题',
  'name': 'WEB_SITE_TITLE',
  'type': 'text',
  'value':'corecmf'
  'group':0

}

items-form-data-checkbox

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填值 | 飞机票 | |---------- |-------------- |---------- |-------------------------------- |-------- |-------- |-------- |-------- | | options | 选项 | Object | — | — | 对象名必填 |checkbox-options |

{
  'userAgreement': {
    name: "我同意相关用户协议",
    eventEnable: ["submitButton"],
    eventDisable: ["resetButton","password"]
  },
}

items-form-data-checkbox-options

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填值 | 飞机票 | |---------- |-------------- |---------- |-------------------------------- |-------- |-------- |-------- |-------- | | name | checkbox标题名 | string | — | — | — | — | | eventEnable | 勾选后启用的form item name | Array | resetButton/submitButton等。还包括自动移字段 | — | — | — | | eventDisable | 勾选后禁用的form item name | Array | resetButton/submitButton等。还包括自动移字段 | — | — | — |

{
  name: "我同意相关用户协议",
  eventEnable: ["submitButton","resetButton","username"],
  eventDisable: ["resetButton","password"]
},

For detailed explanation on how things work, checkout the guide and docs for vue-loader.