Vant3 useCustomFieldValue

介紹

用于自定義 Form 組件中的表單項(xiàng)。

代碼演示

基本用法

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

自定義組件

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

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

export default {
  setup() {
    // 此處傳入的值會(huì)替代 Field 組件內(nèi)部的 value
    useCustomFieldValue(() => 'Some value');
  },
};

表單

接著，在 Form 組件中嵌入你的自定義組件，當(dāng)提交表單時(shí)，即可獲取到自定義表單項(xiàng)的值。

<van-form>
  <!-- 這是一個(gè)自定義表單項(xiàng) -->
  <!-- 當(dāng)表單提交時(shí)，會(huì)包括 useCustomFieldValue 中傳入的值 -->
  <van-field name="my-field" label="自定義表單項(xiàng)">
    <template #input>
      <my-component />
    </template>
  </van-field>
</van-form>

API

類型定義

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

參數(shù)