Vant4 TimePicker 時間選擇

介紹

時間選擇器，通常與彈出層組件配合使用。

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { TimePicker } from 'vant';

const app = createApp();
app.use(TimePicker);

代碼演示

基礎(chǔ)用法

通過 ?v-model? 綁定當(dāng)前選中的時間。

<van-time-picker v-model="currentTime" title="選擇時間" />

import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '00']);
    return { currentTime };
  },
};

選項類型

通過 ?columns-type? 屬性可以控制選項的類型，支持以任意順序?qū)?nbsp;?hour?、?minute? 和 ?second? 進(jìn)行排列組合。

比如：

• 傳入 ?['hour']? 來單獨(dú)選擇小時。
• 傳入 ?['minute']? 來單獨(dú)選擇分鐘。
• 傳入 ?['minute', 'second']? 來選擇分鐘和秒。
• 傳入 ?['hour', 'minute', 'second']? 來選擇小時、分鐘和秒。

<van-time-picker
  v-model="currentTime"
  title="選擇時間"
  :columns-type="columnsType"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '00', '00']);
    const columnsType = ['hour', 'minute', 'second'];
    return {
      currentTime,
      columnsType,
    };
  },
};

時間范圍

<van-time-picker
  v-model="currentTime"
  title="選擇時間"
  :min-hour="10"
  :max-hour="20"
  :min-minute="30"
  :max-minute="40"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '35']);
    return { currentTime };
  },
};

格式化選項

通過傳入 ?formatter? 函數(shù)，可以對選項的文字進(jìn)行格式化。

<van-time-picker
  v-model="currentTime"
  title="選擇時間"
  :formatter="formatter"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '00']);
    const formatter = (type, option) => {
      if (type === 'hour') {
        option.text += '時';
      }
      if (type === 'minute') {
        option.text += '分';
      }
      return option;
    };

    return {
      filter,
      currentTime,
    };
  },
};

過濾選項

通過傳入 ?filter? 函數(shù)，可以對選項數(shù)組進(jìn)行過濾，剔除不需要的時間，實現(xiàn)自定義時間間隔。

<van-time-picker v-model="currentTime" title="選擇時間" :filter="filter" />

import { ref } from 'vue';

export default {
  setup() {
    const currentTime = ref(['12', '00']);
    const filter = (type, options) => {
      if (type === 'minute') {
        return options.filter((option) => Number(option) % 10 === 0);
      }
      return options;
    };

    return {
      filter,
      currentTime,
    };
  },
};

API

Props

Events

Slots

類型定義

組件導(dǎo)出以下類型定義：

import type { TimePickerProps, TimePickerColumnType } from 'vant';

常見問題

在桌面端無法操作組件？

參見桌面端適配。