formulate-el-ui 项目介绍

有了它，你就不需要使用 el-form 了

formulate-el-ui 为 vueformulate 项目加上了 element-ui 皮肤，可以让你在 element-ui 项目中使用 vueformulate 时保持风格统一

关于 element-ui 中的 el-form 和 vueformulate 包的功能比较，我写了一篇 文章 ,供大家参考借鉴

语义化版本

本项目遵循 语义化版本 2.0

在安装之前，需要安装如下 npm 包

• @braid/vue-formulate
• element-ui

安装

yarn add formulate-el-ui
复制代码

快速体验

git clone git@github.com:tu6ge/formulate-el-ui.git

cd formulate-el-ui

yarn install // or npm i

npm run serve //可以快速体验本项目的一些演示 demo
复制代码

使用

全局引入

在你的 main.js 文件的适当位置加上如下代码：

import 'formulate-el-ui/dist/element-ui.min.css';
import formulateElementUI from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [formulateElementUI]
})
复制代码

只使用样式

import {
  theme
} from 'formulate-el-ui'
import 'formulate-el-ui/dist/element-ui.min.css';

Vue.use(VueFormulate, {
  plugins: [theme], // 配合上面引入的样式文件，使用 element-ui 的风格
})
复制代码

如果需要使用行内表单（所有的表单域在一行内展示），则可以在 FormulateForm 组件上加一个 el-formulate__form-inline 样式即可：

<FormulateForm
  :form-class="['el-formulate__form-inline']"
>
  <FormulateInput
    label="个性签名"
    type="el-input"
    value="你好，Element-UI"
  />
</FormulateForm>
复制代码

注意：使用行内表单时，展示错误信息使用了 position:absoulte, 如果字段中的验证规则有多条错误信息，会导致展示错乱，所以，需要在验证
中使用 bail 规则 ，
这样错误信息就会只展示一条。

只修正 checkbox 组件的 help 展示位置

import {
  CheckboxHelp,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [CheckboxHelp], // CheckboxHelp 用于解决 checkbox 组件中 help 信息展示位置错误的问题
})
复制代码

增加中国手机号和身份证号码验证规则、

包含的规则：

• mobile ：手机号码格式验证
• idcard ：18位身份证格式验证

import {
  rules,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [rules],
})
复制代码

只扩展 element-ui 常用的表单域组件

import {
  inputs,
} from 'formulate-el-ui'

Vue.use(VueFormulate, {
  plugins: [inputs],
})
复制代码

目前包含的组件

查看 github ,了解项目的最新特性

你也可以查看 vueformulate 中文文档