Vant3 useCustomFieldValue

2021-09-07 17:25 更新

介绍

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

代码演示

基本用法

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

自定义组件

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

// MyComponent.vue
import { useCustomFieldValue } from '@vant/use';

export default {
  setup() {
    // 此处传入的值会替代 Field 组件内部的 value
    useCustomFieldValue(() => 'Some value');
  },
};

表单

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

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

API

类型定义

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

参数

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


以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号