jeep-ui

🇨🇳 中文文档

Practical UI for Vue.js

Inspired by Semantic-ui and Element-ui

why do it?

Usually, the Element UI will be my first choice to build a Vue.js project.

Unfortunately, the Element's form is not easy to use, and the form is too frequently to use.

So, there is jeep-ui. Hope robust as jeep.

For convenience, use the same form validator as Element, called async-validator.

Install

npm install jeep-ui

Quick start

Import all components

import Vue from 'vue'
import JeepUI from 'jeep-ui'
 
Vue.use(JeepUI)

Manually import

import { Button } from 'jeep-ui'
 
Vue.component(Button.name, Button)

Plan

Stage1: (2017.11.22 Done)

• Button
• Input
• Radio
• Checkbox
• Toggle
• Form

Stage2: (2017.12.6 Done)

• DropDown
• DatePicker
• Loading

Stage3:

• Upload
• Modal

(...continue)

Usage

Part of template：

<j-form :formData="data" :errorData="error" ref="form" :rules="rules">
 
  <j-form-item label="username" prop="username">
    <j-input></j-input>
  </j-form-item>
  
  <j-form-item label="password" prop="password">
    <j-input type="password"></j-input>
  </j-form-item>
  
  <j-form-item>
    <j-button @click="submit">submit</j-button>
  </j-form-item>
  
</j-form>

Part of JavaScript：

export default {
  data() {
    return {
      data: {},
      rules: {},
      error: {}
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate((data) => {
        console.log(data)
      })
    }
  }
}

Browser Support

Modern browsers and Internet Explorer 9+(no test).

Components

Form

Attribute	Description	Type	Accepted values	Default
label-position	position of label	string	left,right	right
error-template	template of error message	string	-	[prop] is required
formData	the entire data of form	object	-	-
rules	validation rules of form (async-validator)	object	-	-
errorData	message of error	object	-	-

FormItem

Attribute	Description	Type	Accepted values	Default
prop	a key of this item	string	-	-
label	label	string	-	-
required	whether the field is required or not	boolean	true,false	true
show-message	whether the error message is show or not	boolean	true,false	true
labelWidth	width of label	string	-	80px
contentWidth	width of content	string	-	160px

Button

Attribute	Description	Type	Accepted values	Default
type	button type	string	-	text
plain	determine whether it's a plain button	boolean	true,false	false
disable	disable the button	boolean	true,false	false
loading	determine whether it's loading	boolean	true,false	false
nativeType	same as native button's type	string	-	button

Input

Attribute	Description	Type	Accepted values	Default
type	input type	string	-	text
value	input value	string／number	-	-
disabled	disable the input	boolean	true,false	false
loading	determine whether it's loading	boolean	true,false	false
prefixIcon	the prefix icon	string	-	-
suffixIcon	the suffix icon	string	-	-
readonly	same as native input's readonly	boolean	true,false	false
placeholder	same as native input's placeholder	string	-	-
name	same as native input's name	string	-	-
max	same as native input's max	string	-	-
min	same as native input's min	string	-	-
step	same as native input's step	string	-	-
autofocus	same as native input's autofocus	string	-	-
form	same as native input's form	string	-	-
autoComplete	same as native input's autoComplete	string	-	-
focus	triggers when Input focus	function	-	-
blur	triggers when Input blurs	function	-	-
change	triggers when Input value change	function	-	-

Radio

Attribute	Description	Type	Accepted values	Default
name	same as native radio's name	string	-	-
readonly	same as native radio's readonly	boolean	true,false	false
checked	same as native radio's checked	boolean	true,false	false

RadioGroup

Attribute	Description	Type	Accepted values	Default
options	options	array	-	-
value	radio value	string／number	-	-

Checkbox

Attribute	Description	Type	Accepted values	Default
name	same as native checkbox's name	string	-	-
readonly	same as native checkbox's readonly	boolean	true,false	false
checked	same as native checkbox's checked	boolean	true,false	false

CheckboxGroup

Attribute	Description	Type	Accepted values	Default
options	options	array	-	-
value	checkbox value	string／number	-	-

Toggle

Attribute	Description	Type	Accepted values	Default
name	input name of Toggle	string	-	-
checked	same as native toggle's checked	boolean	true,false	false

Dropdown

Attribute	Description	Type	Accepted values	Default
name	input name of Dropdown	string	-	-
options	options	array	-	-
defaultText	default text	string	-	select

Loading

Attribute	Description	Type	Accepted values	Default
type	icon type	string	rotate-plane、sk-circle、sk-fading-circle、double-bounce、rect、cube、bounce	rotate-plane
loading	determine whether it's loading	boolean	true,false	false
mask	whether the mask is show or not	boolean	true,false	true
noText	whether the text is show or not	boolean	true,false	false
text	text	string	-	loading...

LICENSE

MIT