With it, you don’t need to use El-Form

Formula-el-ui adds an Element-UI skin to the VueFormulate project, allowing you to keep your style uniform when using VueFormulate in an Element-UI project

I wrote an article about the comparison of the el-Form and vueformulate packages in Element-UI for your reference

Semantic version

This project follows semantic version 2.0

Before the installation, you need to install the following NPM packages

  • @braid/vue-formulate
  • element-ui

The installation

yarn add formulate-el-ui
Copy the code

Rapid experience

git clone [email protected]:tu6ge/formulate-el-ui.git cd formulate-el-ui yarn install // or npm i npm run serve // You can quickly experience some demos of this projectCopy the code

use

Introduced the global

Add the following code in the appropriate place 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]
})
Copy the code

Use styles only

import { theme } from 'formulate-el-ui' import 'formulate-el-ui/dist/element-ui.min.css'; Use (VueFormulate, {plugins: [theme], // Use element-UI style to formulate, {plugins: [theme],})Copy the code

If you want to use inline forms (all form fields are displayed on a single line), you can add an el-formulate__form-inline style to the FormulateForm component:

<FormulateForm :form-class="['el-formulate__form-inline']" > <FormulateInput label=" signature "type="el-input" value=" Hello, Element-UI" /> </FormulateForm>Copy the code

Note: Position :absoulte is used to display error messages in the inline form. If there are multiple error messages in the verification rules in the field, the display will be confused. Therefore, it is necessary to use bail rule in the verification, so that only one error message will be displayed.

Fix only the help display position of the checkbox component

import { CheckboxHelp, } from 'formulate-el-ui' Vue.use(VueFormulate, { plugins: [CheckboxHelp], // CheckboxHelp for checkbox component display error})Copy the code

Add verification rules for Chinese mobile phone numbers and ID card numbers,

Included rules:

  • Mobile: verify the mobile phone number format
  • Idcard: 18-bit idcard format verification
import {
  rules,
} from 'formulate-el-ui'

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

Extend only the forms-domain components commonly used by Element-UI

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

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

Components currently contained

component FormulateInput type In support of the prop
Input el-input Autosize, clearable, maxLength, minlength,rows, showPassword, showWordLimit, elType (value istextareaIs a multi-line text box.
Cascader el-cascader “beforeFilter”, “clearable”, “collapseTags”, “debounce”, “disabled”, “filterMethod”, “options”, “placeholder”, “popperClass”, “props”, “separator”, “showAllLevels”, “size”
ColorPicker ColorPicker el-color-picker ‘colorFormat’,’predefine’,’showAlpha’
InputNumber el-input-number ‘min’,’max’,’step’,’stepStrictly’,’precision’
Rate el-rate ‘allowHalf’,’colors’,’disabledVoidColor’,’disabledVoidIconClass’,’highThreshold’,’iconClasses’,’max’,’lowThreshold’,’sho wScore’,’showText’,’texts’,’testColor’,’voidColor’,’voidIconClass’
Switch el-switch ‘activeText’,’inactiveText’,’activeColor’,’inactiveColor’
Slider el-slider ‘formatTooltip’,’min’,’marks’,’max’,’scoreTemplate’,’showTooltip’,’step’,’showStops’,’showInput’,’showInputControls’,’ra nge’,’vertical’,’height’

Check out Github for the latest features of the project

You can also check out the Vueformulate Chinese document