FormKit element plus

Element plus for FormKit.

Most of the components are based on Element plus, attributes directly pass to the element plus component.

Preview

install

This library require Element plus and FormKit to be installed.

1npm i element-plus
2npm i @formkit/vue
3npm i @formkit/i18n
4npm i formkit-element-plus

Setup

direct setup in main.ts

1import { plugin, defaultConfig } from '@formkit/vue'
2import { FormKitElementPlusPlugin } from "formkit-element-plus";
3import { zh } from '@formkit/i18n'
4import ElementPlus from "element-plus";
5import "element-plus/dist/index.css";
6
7const app = createApp(App);
8
9app.use(ElementPlus);
10app.use(FormKitElementPlusPlugin, {
11    // set language
12    locales: { zh },
13    locale: 'zh'
14})

Usage

Basic

1 <FormKit type="el-form" v-model="data" ref="elf" id="elform">
2      <FormKit type="el-input" label="input3" name="input3" validation="required" placeholder="testing3" clearable />
3
4      <FormKit type="el-select" label="Select" name="select" :options="{
5        mercury: 'Mercury',
6        venus: 'Venus',
7        earth: 'Earth',
8        mars: 'Mars',
9        jupiter: 'Jupiter',
10        saturn: 'Saturn',
11        uranus: 'Uranus',
12        neptune: 'Neptune',
13      }" 
14      validation="required" clearable placeholder="select placeholder" filterable multiple />
15
16      <FormKit type="el-checkbox" label="Checkbox1" name="cb1" validation="required"/>
17
18      <FormKit type="el-rate" label="Rate" name="rate1"/>
19      <FormKit type="el-switch" label="Switch" name="switch1"/>
20      <FormKit type="el-time-picker" label="Time Picker 1" name="time_picker_1"/>
21      <FormKit type="el-input-number" label="input nubmer 1" name="input_number_1"/>
22
23      <FormKit type="el-radio-group" label="Radio Group" name="radio1" :options="{
24        mercury: 'Mercury',
25        venus: 'Venus',
26        earth: 'Earth',
27        mars: 'Mars',
28        jupiter: 'Jupiter',
29        saturn: 'Saturn',
30        uranus: 'Uranus',
31        neptune: 'Neptune',
32      }" validation="required"/>
33
34
35      <FormKit type="el-slider" label="Slider1" name="slider1" />
36      <FormKit type="el-slider" label="Slider2" name="slider2" :min="100" :max="200" :step="2" />
37
38      <FormKit type="el-color-picker" label="ColorPicker" name="color1" />
39
40
41    </FormKit>

Supported type

• el-cascader
• el-rate
• el-select
• el-date-picker
• el-date-range-picker
• el-switch
• el-time-picker
• el-autocomplete
• el-upload
• el-tree-select
• el-checkbox
• el-color-picker
• el-input
• el-input-number
• el-password
• el-radio-group
• el-slider
• el-textarea
• el-time-select
• el-form
• el-transfer
• el-checkbox-group
• el-tree
• el-array-table
• el-array-cards
• el-array-collapse
• el-array-items
• el-array-tabs

el-form submit

Due to the limitation of vue3, the submit event of el-form is not supported. You can use the submit attribute of FormKit to submit the form.

1const data=ref({})
2let onSubmit=()=>{
3  console.log('submited')
4}
5

1  <FormKit type="elForm" v-model="data" @submit="onSubmit">
2    ...   
3  </FormKit>