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

FormItem

Button

Input

Radio

RadioGroup

Checkbox

CheckboxGroup

Toggle

Dropdown

Loading

LICENSE

MIT