jim-ui v0.0.6

jui

Practical UI for Vue.js

Inspired by Semantic-ui and Element-ui

为什么做这个UI

通常，开发Vue.js的项目时，UI框架首选是 饿了么的Element UI。

其中，表单这一块经常用，而Element UI的表单太繁琐，这就是出发点。

为了方便使用，最终表单的校验方式同样使用了async-validator

安装

由于jui这个名字已经被注册，所以在npm注册的名字是jim-ui，

npm install jim-ui

项目规划

第一阶段：完成组件：(2017.11.22已完成)

• Button 按钮
• Input 输入框
• Radio 单选框
• Checkbox 复选框
• Toggle 开关
• Form 表单

第二阶段：完善Form相关的组件，包含：

• DropDown 选择器
• DatePicker 日期选择器

第三阶段：继续完善其他组件：

• Upload 上传
• Loading 加载状态
• Modal 弹框

(...未完待续)

表单用法

template部分：

<j-form :formData="data" :errorData="error" ref="form" :rules="rules">

  <j-form-item label="账号" prop="name">
    <j-input></j-input>
  </j-form-item>
  
  <j-form-item label="密码" 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>

JavaScript逻辑部分：

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

组件

form

form-item

button

input

radio

radio-group

checkbox

checkbox-group

toggle

dropdown

loading