Rz-el-comp NPM

rz-comp

A components group base on element-ui

Component Install

Should import Element first.
You can import the Element entirely or import the components that mentions below on demand.

npm install rz-comp -S

Component Details

rz-sidebar

Element Requirements:
Menu
MenuItem
Submenu
Tooltip (while attribute collapse is true)

<rz-sidebar
  :list="List"
  :config="Config"/>

Attributes

Attribute	Description	Type	Accepted Values	Default
config	components config	Object	-	-
list	item list	Array	-	-

Object Config Attributes

Attribute	Description	Type	Accepted Values	Default
collapse	whether the menu is collapsed	Boolean	-	false
defaultActive	the index of menu in List	String	-	-
defaultOpenAll	whether open all the sub-menus	Boolean	-	true

Array List Structure

List: [
  {
    label: 'aa',
    isLeaf: true,
    icon: 'el-icon-plus',
    callback() {
    }
  },
  {
    label: 'bb',
    isLeaf: false,
    leafList: [
      {
        label: 'bb-1', icon: 'el-icon-minus', callback() {
        }
      },
      {
        label: 'bb-2', callback() {
        }
      },
    ],
    icon: 'el-icon-location'
  }
]

Object the item of List Attributes

Attribute	Description	Type	Accepted Values	Default
label	label text	String	-	-
isLeaf	whether the menu node has no submenu	Boolean	-	true
icon	the name of icon	String	-	-
leafList	submenu list while isLeaf is false	Array	see the item attributes below	-
callback	the method when menu is clicked	Function	-	-

Object the item of leafList Attributes

Attribute	Description	Type	Accepted Values	Default
label	label text	String	-	-
icon	the name of icon	String	-	-
callback	the method when menu is clicked	Function	-	-

rz-query-bar

Element Requirements:
Button
Input (while attribute type = 'text')
DatePicker (while attribute type = 'date' or 'date-range')
Select (while attribute type = 'select')
Option (while attribute type = 'select')

<rz-query-bar
  :button-group="buttonGroup"
  :list="List"
  :data.sync="Data"/>

Attributes

Attribute	Description	Type	Accepted Values	Default
buttonGroup	operation button group	Array	-	-
list	item list	Array	-	-
data	binding value	Object	{}	-

Array List Structure

List: [
  {
    type: 'text', 
    label: 'aa',
    size: 'small',
    prop: 'a',
    clearable: false,
  },
  {
    type: 'date',
    label: 'bb',
    size: 'small',
    prop: 'b',
  },
  {
    type: 'date-range',
    label: 'cc',
    size: 'small',
    pickerList: [
      {
        label: 'Latest Month',
        duringTime: 3600 * 24 * 1000 * 30,
      }
    ],
    prop: 'c',
  },
  {
    type: 'select',
    label: 'dd',
    size: 'small',
    selectList: [
      {key: 0, label: '0'},
      {key: 1, label: '1'},
      {key: 2, label: '2'},
    ], 
    prop: 'd',
  }
]

Object the item of List Attributes

Attribute	Description	Type	Accepted Values	Default
type	(required) the type of item	String	text / date / select / date-range	-
prop	(required) the data key name of item	String	-	-
label	label text	String	-	-
size	size of item	String	small / mini / undefined	-
clearable	whether component provides a clear button	Boolean	-	true
pickerList	the date picker config when type = 'date-range'	Array	see the item attributes below	-
selectList	the options list when type = 'select'	Array	see the item attributes below	-

Object the item of pickerList Attributes

Attribute	Description	Type	Accepted Values	Default
label	label text	String	-	-
duringTime	the time before now (unit: ms)	Number	-	-

Object the item of selectList Attributes

Attribute	Description	Type	Accepted Values	Default
label	label text	String	-	-
key	option key name	String	-	-

Array buttonGroup Structure

buttonGroup: [
  {
    label: 'Search',
    size: 'small',
    type: 'primary',
    callback() {
    }
  },
  {
    label: 'Delete',
    size: 'small',
    callback() {

    }
  }
],

Object the item of buttonGroup Attributes

Attribute	Description	Type	Accepted Values	Default
label	label text	String	-	-
size	size of item	String	small / mini / undefined	-
type	Element Button type	String	primary / success / warning / danger / info / text	-
callback	the method when button is clicked	Function	-	-

rz-form-item

Element Requirements:
Button
Input (while attribute type = 'text')
DatePicker (while attribute type = 'date' or 'date-range')
Select (while attribute type = 'select')
Option (while attribute type = 'select')
Switch (while attribute type = 'switch')

<rz-form-item
    :config="Config"
    :list="List"
    :rules="Rules"
    :data.sync="Data"/>

Attributes

Attribute	Description	Type	Accepted Values	Default
config	components config	Object	-	-
list	item list	Array	-	-
rules	Element Form rules	Object	-	-
data	binding value	Object	{}	-

Object Config Attributes

Attribute	Description	Type	Accepted Values	Default
refName	ref name of the form	String	-	-
size	size of item	String	small / mini / undefined	-
identity	form items id prefix. Shouldn't be same as other rz-form-item	String	-	-

Array List Structure

List: [
  {type: 'text', label: 'aa', prop: 'a', clearable: false, limit: [0, 10]},
  {type: 'date', label: 'bb', prop: 'b'},
  {
    type: 'select',
    label: 'cc',
    prop: 'c',
    selectList: [
      {key: 0, label: '0'},
      {key: 1, label: '1'},
    ]
  },
  {type: 'switch', label: 'ee', prop: 'e'},
  {type: 'text', inputType: 'textarea', rows: 5,  label: 'dd', prop: 'd'},
],

Object the item of List Attributes

Attribute	Description	Type	Accepted Values	Default
type	(required) the type of item	String	text / date / select / switch / date-range	-
prop	(required) the data key name of item	String	-	-
label	label text	String	-	-
size	size of item	String	small / mini / undefined	-
clearable	whether component provides a clear button	Boolean	-	true
limit	text string length limit. When type = 'text'	Array(2)	min, max	-
pickerList	the date picker config when type = 'date-range'	Array	see the item attributes below	-
selectList	the options list when type = 'select'	Array	see the item attributes below	-
inputType	type of input. When type = 'text'	String	textarea / undefined	-
rows	numbers of text area rows. When inputType = 'textarea'	Number	-	3