connect
描述
主要用于对第三方组件库的无侵入接入 Formily
签名
ts
interface IComponentMapper<T extends Vue.Component> {
(target: T): Vue.Component
}
interface connect<T extends Vue.Component> {
(target: T, ...args: IComponentMapper<T>[]): Vue.Component
}入参传入第一个参数是要接入的组件，后面的参数都是组件映射器，每个映射器都是一个函数，通常我们会使用内置的mapProps和mapReadPretty映射器
用例
<script setup lang="ts">
import type { Field as TypeField } from '@formily/core'
import { createForm, setValidateLanguage } from '@formily/core'
import {
connect,
Field,
FormConsumer,
FormProvider,
mapProps,
} from '@silver-formily/vue'
import { ElButton, ElFormItem, ElInput } from 'element-plus'
setValidateLanguage('en')
const FormItem = connect(
ElFormItem,
mapProps(
{
title: 'label',
description: 'extra',
required: true,
validateStatus: true,
},
(props, field: TypeField) => ({
...props,
help: field.selfErrors?.length ? field.selfErrors : undefined,
}),
),
)
const form = createForm({ validateFirst: true })
function log(...args: unknown[]) {
console.log(...args)
}
function handleSubmit() {
form.submit(log)
}
</script>
<template>
<FormProvider :form="form">
<Form layout="vertical">
<Field
name="name"
title="Name"
required
:decorator="[FormItem]"
:component="[ElInput, { placeholder: 'Please ElInput' }]"
/>
<FormConsumer>
<template #default="{ form: _form }">
<div style="white-space: pre; margin-bottom: 16px">
{{ JSON.stringify(_form.values, null, 2) }}
</div>
<ElButton type="primary" @click="handleSubmit">
Submit
</ElButton>
</template>
</FormConsumer>
</Form>
</FormProvider>
</template><script setup lang="ts">
import type { Field as TypeField } from '@formily/core'
import { createForm, setValidateLanguage } from '@formily/core'
import {
connect,
Field,
FormConsumer,
FormProvider,
mapProps,
} from '@silver-formily/vue'
import { ElButton, ElFormItem, ElInput } from 'element-plus'
setValidateLanguage('en')
const FormItem = connect(
ElFormItem,
mapProps(
{
title: 'label',
description: 'extra',
required: true,
validateStatus: true,
},
(props, field: TypeField) => ({
...props,
help: field.selfErrors?.length ? field.selfErrors : undefined,
}),
),
)
const form = createForm({ validateFirst: true })
function log(...args: unknown[]) {
console.log(...args)
}
function handleSubmit() {
form.submit(log)
}
</script>
<template>
<FormProvider :form="form">
<Form layout="vertical">
<Field
name="name"
title="Name"
required
:decorator="[FormItem]"
:component="[ElInput, { placeholder: 'Please ElInput' }]"
/>
<FormConsumer>
<template #default="{ form: _form }">
<div style="white-space: pre; margin-bottom: 16px">
{{ JSON.stringify(_form.values, null, 2) }}
</div>
<ElButton type="primary" @click="handleSubmit">
Submit
</ElButton>
</template>
</FormConsumer>
</Form>
</FormProvider>
</template>
查看源码