模块
组成formkit系统的各个表单组件，以下模块若不是您的预期，您也可以自定义模块registerModule
cascader 级联选择器
当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。
Template
<formkit
:config="[
{
type: 'cascader',
label: '级联选择器',
key: 'cascaderValue',
options: options,
props: { placeholder: '请选择数据', clearable: true }
}
]"
v-model="dataset">
</formkit>
TypeScript
<script setup lang="ts">
import formkit from 'element-plus-formkit';
import { ref, computed } from 'vue';
const dataset = ref({})
const options = ref([
{
value: 'guide',
label: 'Guide',
children: [
{
value: 'disciplines',
label: 'Disciplines',
children: [
{ value: 'consistency', label: 'Consistency' },
{ value: 'feedback', label: 'Feedback' },
{ value: 'efficiency', label: 'Efficiency' },
{ value: 'controllability', label: 'Controllability' }
]
}
]
}
])
</script>
提示
原生ElCascader API请写入props内
input 输入框
输入框
<formkit
:config="[
{
type: 'input',
label: '姓名',
key: 'password',
props: { placeholder: '请输入姓名', clearable: true }
}
]"
v-model="dataset">
</formkit>
提示
原生ELinput API请写入props内
switch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
<formkit
:config="[
{
type: 'switch',
label: '开关',
key: 'switchValue',
props: {
inlinePrompt: true,
activeText: '完整展示多个内容',
inactiveText: '多个内容'
}
}
]"
v-model="dataset">
</formkit>
提示
原生ElSwitch API请写入props内
select 选择器
select选择器, 当选项过多时，使用下拉菜单展示并选择内容。
<formkit
:config="[
{
type: 'select',
label: '选择器',
key: 'select1',
props: { placeholder: '请选择', clearable: true },
options: [
{ name: '选项一', id: 1 },
{ name: '选项二', id: 2 },
{ name: '选项三', id: 3 }
]
}
]"
v-model="dataset">
</formkit>
Select也可通过requester字段用于动态获取options
Template
<formkit
:config="[
{
type: 'select',
label: '选择器',
key: 'select1',
props: { placeholder: '请选择', clearable: true },
requester: fetchOptions,
handler: (response: any) => response?.items || []
}
]"
v-model="dataset">
</formkit>
TypeScript
<script setup lang="ts">
import formkit from 'element-plus-formkit';
import { ref, computed } from 'vue';
const dataset = ref({})
function fetchOptions() {
return new Promise((r, j) => {
setTimeout(() => {
r({
code: 200,
items: [
{ name: '选择项一', id: 1 },
{ name: '选择项二', id: 2 },
{ name: '选择项三', id: 3 }
]
})
}, 2000)
})
}
</script>
handler作为额外的辅助字段，它会在requester完成后调用，用于将requester的返回值处理成ELselect option可执行的值，当然如果您的requester返回值符合ELselect option期望类型便不需要使用它。
checkbox 多选框
在一组备选项中进行多选。
<formkit
:config="[
{
type: 'checkbox',
label: '多选框',
key: 'checkbox',
options: [
{ name: '选项一', id: 1 },
{ name: '选项二', id: 2 },
{ name: '选项三', id: 3 }
]
}
]"
v-model="dataset">
</formkit>
showAllCheck属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果
output:
<formkit
:config="[
{
type: 'checkbox',
label: '全选多选框',
key: 'checkbox',
props: { showAllCheck: true },
options: [
{ name: '选项一', id: 1 },
{ name: '选项二', id: 2 },
{ name: '选项三', id: 3 }
]
}
]"
v-model="dataset">
</formkit>
提示
当然当您的options需要通过动态获取时，您依旧可以使用requester配合handler辅助完成，详细参考select requester
radio 单选框
在一组备选项中进行单选
output:
<formkit
:config="[
{
type: 'radio',
label: '单选框',
key: 'radio',
options: [
{ name: '选项一', id: 1 },
{ name: '选项二', id: 2 },
{ name: '选项三', id: 3 }
]
}
]"
v-model="dataset">
</formkit>
output: {{ dataset.radio }}
提示
当然当您的options需要通过动态获取时，您依旧可以使用requester配合handler辅助完成，详细参考select requester
inputNumber 数字输入框
数字输入框, 仅允许输入标准的数字值，可定义范围。详细api参数请参照ElInputNumber API
output:
<formkit
:config="[
{
type: 'inputNumber',
label: '步进输入',
key: 'inputNumber',
props: {
min: 0,
max: 10,
style: { width: '100%' },
prefix: '前缀',
suffix: '后缀'
}
}
]"
v-model="dataset">
</formkit>
output: {{ dataset.inputNumber }}
注意
当您需要使用ElInputNumber 原生API时，需要包裹props使用
address 地址选择器
具有层级的区域地址选择器, 使用此模块需要传入requester作为数据源
<formkit
:config="[
{
type: 'address',
label: '地址选择器',
key: 'address',
props: {
style: { width: '50%' },
level: 2,
placeholder: '请选择地址',
requester: (pid: number) => {
return fetchOptions()
},
handler: (response: any) => response?.items || []
}
}
]"
v-model="dataset">
</formkit>
output: {{ dataset.address }}
注意
区别于select、checkbox、radio等需要动态获取options的模块，address模块的requester，需要包裹props使用
popover 文字弹出层
文字弹出层模块选择器
<formkit
:config="[
{
type: 'popover',
label: '文字弹出层',
key: 'popover',
props: {
placeholder: '请点击选择',
props: { multiple: true }
},
options: [
{ name: '选项一', id: 1, children: [{ name: '选项一-1', id: 11 }] },
{ name: '选项二', id: 2 },
{ name: '选项三', id: 3 }
]
}
]"
v-model="dataset">
</formkit>
提示
当然当您的options需要通过动态获取时，您依旧可以使用requester配合handler辅助完成，详细参考select requester
remoteSearchSelect 远程查询
具备远程查询功能的select下拉选择器
输出 remoteSearchSelect:
输出 onChooseCallback:
Template
<formkit
:config="[
{
type: 'remoteSearchSelect',
label: '远程查询选择器',
key: 'remoteSearchSelect',
props: {
labelKey: 'name',
valueKey: 'id',
initialValue: null,
placeholder: '请输入查询内容',
requester: (searchName: string) => fetchOptions(),
handler: (response: any) => response?.items || [],
onChoose: (item: any) => dataset.onChooseCallback = item
}
}
]"
v-model="dataset">
</formkit>
Script
<script setup lang="ts">
import formkit from 'element-plus-formkit';
import { ref, computed } from 'vue';
const dataset = ref({})
function fetchOptions() {
return new Promise((r, j) => {
setTimeout(() => {
r({
code: 200,
items: [
{ name: '选择项一', id: 1 },
{ name: '选择项二', id: 2 },
{ name: '选择项三', id: 3 }
]
})
}, 2000)
})
}
</script>
通常对于数据进行远程加载的选择器对于默认数据处理通常难以控制，因为通常后端处理数据查询需要接受item.name但数据绑定通常为item.id，为此我们引入一个新的参数(initialValue)来进行控制, 当initialValue参数不为空时，我们会在组件完成加载后立即将initialValue作为形参调取您提供的requester
rate 评分
评分选择器，用于评分
<formkit
:config="[
{
type: 'rate',
label: '评分',
key: 'rate',
props: { 'allow-half': false, colors: ['#F7BA2A', '#F7BA2A', '#F7BA2A'], size: 'large' }
}
]"
v-model="dataset">
</formkit>
提示
原生ELRate API请写入props内
datePicker 日期选择器
用于选择或输入日期
输出：-
<formkit
:config="[
{
type: 'datePicker',
label: '日期选择器',
key: 'datePickerValue',
props: { valueFormat: 'YYYY-MM-DD', placeholder: '点击选择日期' }
}
]"
v-model="dataset">
</formkit>
<p>输出：{{ dataset.datePickerValue || "-" }}</p>
提示
原生ElDatePicker API请写入props内
timePicker 时间选择器
用于选择或输入日期
输出：-
<formkit
:config="[
{
type: 'timePicker',
label: '时间选择器',
key: 'timePickerValue',
props: { placeholder: '点击选择时间' }
}
]"
v-model="dataset">
</formkit>
<p>输出：{{ dataset.timePickerValue || "-" }}</p>
提示
原生ElTimePicker API请写入props内
timeSelect 时间选择
用于选择或输入日期
可用时间范围是 00:00-23:59
输出：-
<formkit
:config="[
{
type: 'timeSelect',
label: '时间选择',
key: 'timeSelectValue',
props: { placeholder: '点击时间选择', start: '08:30', end: '18:30' }
}
]"
v-model="dataset">
</formkit>
<p>输出：{{ dataset.timeSelectValue || "-" }}</p>
提示
原生ElTimeSelect API请写入props内
upload 上传器
通过点击上传文件。
上传器的使用，需要配置setConfigure upload
template
<formkit
:config="[
{
type: 'upload',
label: '上传器',
key: 'uploadValue',
props: {
limit: 4,
afterUpload: (response) => {
return response.data
}
}
}
]"
v-model="dataset">
</formkit>
typescript
<script setup lang="ts">
import formkit, { setConfigure } from 'element-plus-formkit';
import type { UploadRequesterOptions } from 'element-plus-formkit/types/formkit-types'
import { ref, computed } from 'vue';
const dataset = ref({})
setConfigure('upload', async (file: File, options: UploadRequesterOptions) => {
const url = URL.createObjectURL(file)
return new Promise((r, j) => {
setTimeout(() => {
r({
code: 200,
data: url || "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
})
}, 2000)
})
})
</script>
slider 滑块
滑块选择器
通过拖动滑块在一个固定区间内进行选择
Output: -
<formkit
:config="[
{
type: 'slider',
label: '滑块选择器',
key: 'sliderValue',
props: {
range: true,
marks: {
0: '0°C',
8: '8°C',
37: '37°C',
50: {
style: {
color: '#1989FA',
},
label: '50%',
}
}
}
}
]"
v-model="dataset">
</formkit>
提示
原生ElSlider API请写入props内
treeSelect 树形选择
含有下拉菜单的树形选择器，结合了 el-tree 和 el-select 两个组件的功能。
Output: -
<formkit
:config="[
{
type: 'treeSelect',
label: '树形选择器',
key: 'treeSelectValue',
props: {
'render-after-expand': false,
style: { width: '240px' },
data: [
{
value: '1',
label: 'Level one 1',
children: [
{
value: '1-1',
label: 'Level two 1-1',
children: [
{
value: '1-1-1',
label: 'Level three 1-1-1'
}
]
}
]
},
{
value: '2',
label: 'Level one 2',
children: [
{
value: '2-1',
label: 'Level two 2-1',
children: [
{
value: '2-1-1',
label: 'Level three 2-1-1'
}
]
}
]
},
{
value: '3',
label: 'Level one 3',
children: [
{
value: '3-1',
label: 'Level two 3-1',
children: [
{
value: '3-1-1',
label: 'Level three 3-1-1'
}
]
},
{
value: '3-2',
label: 'Level two 3-2',
children: [
{
value: '3-2-1',
label: 'Level three 3-2-1'
}
]
}
]
}
]
}
}
]"
v-model="dataset">
</formkit>
<p>Output: {{ dataset.timeSelectValue || "-" }}</p>
提示
原生ElTreeSelect API请写入props内