useCustomFieldValue

介绍

用于自定义 Form 组件中的表单项。

代码演示

基本用法

如果需要自定义表单项,可以在 Field 组件的 input 插槽中插入你的自定义组件,并在自定义组件内部调用 useCustomFieldValue 方法。

自定义组件

首先,在你的自定义组件中,调用 useCustomFieldValue 方法,并传入一个回调函数,这个函数返回值为表单项的值。

  1. // MyComponent.vue
  2. import { ref } from 'vue';
  3. import { useCustomFieldValue } from '@vant/use';
  4. export default {
  5. setup() {
  6. const myValue = ref(0);
  7. // 此处传入的值会替代 Field 组件内部的 value
  8. useCustomFieldValue(() => myValue.value);
  9. return { myValue };
  10. },
  11. };

表单

接着,在 Form 组件中嵌入你的自定义组件,当提交表单时,即可获取到自定义表单项的值。

  1. <van-form>
  2. <!-- 这是一个自定义表单项 -->
  3. <!-- 当表单提交时,会包括 useCustomFieldValue 中传入的值 -->
  4. <van-field name="my-field" label="自定义表单项">
  5. <template #input>
  6. <my-component />
  7. </template>
  8. </van-field>
  9. </van-form>

API

类型定义

  1. function useCustomFieldValue(customValue: () => unknown): void;

参数

参数说明类型默认值
customValue获取表单项值的函数() => unknown-

useCustomFieldValue - 图1