formulate el ui Download - formulate el ui Source code download

formulate el ui

Other categories

1.0.0

Download

VueFormulate

formulate-el-ui

This project adds element-ui skin to the vueformulate project, which allows you to maintain a unified style when using vueformulate in element-ui projects.

Regarding the functional comparison between el-form and vueformulate packages in element-ui, I wrote an article for your reference.

semantic version

This project follows Semantic Version 2.0

Before installation, you need to install the following npm packages

@braid/vue-formulate Chinese documentation
element-ui

Install

 yarn add formulate-el-ui

Quick experience

Click to preview

use

Global introduction

Add the following code to the appropriate location in your main.js file:

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

Vue.use(VueFormulate, {
  plugins: [formulateElementUI]
})

Just use styles

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

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

If you need to use an inline form (all form fields are displayed in one line), you can add an el-formulate__form-inline style to the FormulateForm component:

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

To learn more, visit the documentation for form-class

Note: When using an inline form, position:absoulte is used to display error messages. If there are multiple error messages in the validation rules in the field, the display will be confusing. Therefore, you need to use the bail rule in the validation, so that only the error messages will be displayed. One piece.

Only correct the help placement of the checkbox component

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

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

Added Chinese mobile phone number and ID number verification rules,

Rules included:

mobile: Mobile phone number format verification
idcard: 18-digit ID card format verification

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

Vue.use(VueFormulate, {
  plugins: [rules],
})

Only extend element-ui commonly used form field components

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

Vue.use(VueFormulate, {
  plugins: [inputs],
})

Currently included components

components	FormulateInput type	Supported props
Input	`el-input`	autosize, clearable, maxlength, minlength, rows, disabled showPassword, showWordLimit, elType (when the value is `textarea` , it is a multi-line text box)
Cascader	`el-cascader`	beforeFilter, clearable, collapseTags, debounce, disabled, filterMethod, elLabel, options, placeholder, popperClass, props, separator, showAllLevels, size, elValue
ColorPicker color picker	`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

Required fields+v0.2.5

When required prop is added to the el-form-item component of element-ui, a red * will be displayed to remind the user that this field is required. Now this project also supports it. As long as the validation rule of FormulateInput contains required , it will This red * is added by default. If you don't want to display it, you can set requiredTip prop to false on FormulateInput , that's it:

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

Known issues

The project maintainer is focusing on vue3 compatibility and currently does not have time to deal with issues and PRs. Although this is the case, the entire project has complete unit tests based on vue2, so you can use it with confidence.
In the edit form, if there is a picture form field, after calling the interface and assigning the picture data to the form, the form will not render the picture. The temporary solution is to add a v-if="loadForm" on the formulate-form component. v-if="loadForm" The default value of loadForm is set to false . After the interface returns the data, then set it to true to achieve the purpose of rendering the image.