Vant3 useCustomFieldValue

介紹

用于自定義 Form 組件中的表單項。

代碼演示

基本用法

如果需要自定義表單項，可以在 Field 組件的 input 插槽中插入你的自定義組件，并在自定義組件內(nèi)部調(diào)用 useCustomFieldValue 方法。

自定義組件

首先，在你的自定義組件中，調(diào)用 useCustomFieldValue 方法，并傳入一個回調(diào)函數(shù)，這個函數(shù)返回值為表單項的值。

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

export default {
  setup() {
    // 此處傳入的值會替代 Field 組件內(nèi)部的 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;

參數(shù)