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

快速体验

点击预览

使用

全局引入

在你的 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>

要了解更多，请访问 form-class 的文档

注意：使用行内表单时，展示错误信息使用了 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],
})

目前包含的组件

| 组件 | FormulateInput type | 支持的 prop | |----|----|----| | Input | el-input | autosize, clearable, maxlength, minlength,rows, disabled showPassword, showWordLimit, elType (值为textarea 时，是多行文本框) | | Cascader | el-cascader | beforeFilter, clearable, collapseTags, debounce, disabled, filterMethod, elLabel, options, placeholder, popperClass, props, separator, showAllLevels, size, elValue | | ColorPicker 颜色选择器 | el-color-picker | colorFormat,predefine,showAlpha | | InputNumber | el-input-number | min,max,step,stepStrictly,precision,disabled | | Rate | el-rate | allowHalf,colors,disabledVoidColor,disabledVoidIconClass,highThreshold,iconClasses,max,lowThreshold,showScore,showText,texts,testColor,voidColor,voidIconClass | | Select | el-select | allowCreate,clearable,collapseTags,filterable, disabled,multiple | | Slider | el-slider | formatTooltip,min,marks,max,scoreTemplate,showTooltip,step,showStops,showInput,showInputControls,range,vertical,height | | Switch | el-switch | activeText,inactiveText,activeColor,inactiveColor, disabled |

必填字段 +v0.2.5

element-ui 的 el-form-item 组件，当加上了 required prop 后，会显示一个红色 * 提示用户该字段必填，现在本项目也已支持，只要是 FormulateInput 的验证规则中包含 required ,则会默认加上这个红色 * ，如果不想显示，则可以在 FormulateInput 上设置 requiredTip prop 为 false,即可：

<FormulateInput :required-tip="false" />

已知问题

• 项目维护者正在专注于做 vue3 的兼容，目前没有时间处理 issue 以及 pr，虽然这样，但是整个项目有基于 vue2 的完整的单元测试，可以放心使用。
• 在编辑表单中，如果有图片表单域，调用接口后，再把图片数据赋值给表单后，表单不会渲染出来图片，临时处理方案是，可以在 formulate-form 组件上加一个 v-if="loadForm" loadForm 默认值设置为 false ,待接口返回数据后，然后再置位 true, 即可达到渲染图片的目的

文档

查看 vueformulate 文档

License

MIT

VS Code 代码提示插件

已推出辅助开发的 vscode 插件，可以点击 formulate-el-helper 安装

星星

如果你感觉好用，就给项目打个星星吧 ^_^

相关推荐

• Vue Formulate Helper : Vue Formulate 的 VS Code 代码提示插件