Vant4 Picker 選擇器

介紹

提供多個選項集合供用戶選擇，支持單列選擇、多列選擇和級聯(lián)選擇，通常與彈出層組件配合使用。

引入

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

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

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

代碼演示

基礎(chǔ)用法

選項配置

Picker 組件通過 ?columns? 屬性配置選項數(shù)據(jù)，?columns? 是一個包含字符串或?qū)ο蟮臄?shù)組。

頂部欄

頂部欄包含標(biāo)題、確認(rèn)按鈕和取消按鈕，點擊確認(rèn)按鈕觸發(fā) ?confirm? 事件，點擊取消按鈕觸發(fā) ?cancel? 事件。

<van-picker
  title="標(biāo)題"
  :columns="columns"
  @confirm="onConfirm"
  @cancel="onCancel"
  @change="onChange"
/>

import { showToast } from 'vant';

export default {
  setup() {
    const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '寧波', value: 'Ningbo' },
      { text: '溫州', value: 'Wenzhou' },
      { text: '紹興', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    const onConfirm = ({ selectedValues }) => {
      showToast(`當(dāng)前值: ${selectedValues.join(',')}`);
    };
    const onChange = ({ selectedValues }) => {
      showToast(`當(dāng)前值: ${selectedValues.join(',')}`);
    };
    const onCancel = () => showToast('取消');

    return {
      columns,
      onChange,
      onCancel,
      onConfirm,
    };
  },
};

搭配彈出層使用

在實際場景中，Picker 通常作為用于輔助表單填寫，可以搭配 Popup 和 Field 實現(xiàn)該效果。

<van-field
  v-model="value"
  is-link
  readonly
  label="城市"
  placeholder="選擇城市"
  @click="showPicker = true"
/>
<van-popup v-model:show="showPicker" round position="bottom">
  <van-picker
    :columns="columns"
    @cancel="showPicker = false"
    @confirm="onConfirm"
  />
</van-popup>

import { ref } from 'vue';

export default {
  setup() {
    const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '寧波', value: 'Ningbo' },
      { text: '溫州', value: 'Wenzhou' },
      { text: '紹興', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    const result = ref('');
    const showPicker = ref(false);

    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false;
      fieldValue.value = selectedOptions[0].text;
    };

    return {
      result,
      columns,
      onConfirm,
      showPicker,
    };
  },
};

雙向綁定

通過 ?v-model? 可以綁定當(dāng)前選中項的 ?values?，修改 ?v-model? 綁定的值時，Picker 的選中狀態(tài)也會隨之改變。

?v-model? 的值是一個數(shù)組，數(shù)組的第一位對應(yīng)第一列選中項的 ?value?，第二位對應(yīng)第二列選中項的 ?value?，以此類推。

<van-picker v-model="selectedValues" title="標(biāo)題" :columns="columns" />

import { showToast } from 'vant';

export default {
  setup() {
    const columns = [
      { text: '杭州', value: 'Hangzhou' },
      { text: '寧波', value: 'Ningbo' },
      { text: '溫州', value: 'Wenzhou' },
      { text: '紹興', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ];
    const selectedValues = ref(['Wenzhou']);

    return {
      columns,
      selectedValues,
    };
  },
};

多列選擇

?columns? 屬性可以通過二維數(shù)組的形式配置多列選擇。

<van-picker title="標(biāo)題" :columns="columns" />

export default {
  setup() {
    const columns = [
      // 第一列
      [
        { text: '周一', value: 'Monday' },
        { text: '周二', value: 'Tuesday' },
        { text: '周三', value: 'Wednesday' },
        { text: '周四', value: 'Thursday' },
        { text: '周五', value: 'Friday' },
      ],
      // 第二列
      [
        { text: '上午', value: 'Morning' },
        { text: '下午', value: 'Afternoon' },
        { text: '晚上', value: 'Evening' },
      ],
    ];

    return { columns };
  },
};

級聯(lián)選擇

使用 ?columns? 的 ?children? 字段可以實現(xiàn)選項級聯(lián)的效果。如果級聯(lián)層級較多，推薦使用 Cascader 級聯(lián)選項組件。

<van-picker title="標(biāo)題" :columns="columns" />

export default {
  setup() {
    const columns = [
      {
        text: '浙江',
        value: 'Zhejiang',
        children: [
          {
            text: '杭州',
            value: 'Hangzhou',
            children: [
              { text: '西湖區(qū)', value: 'Xihu' },
              { text: '余杭區(qū)', value: 'Yuhang' },
            ],
          },
          {
            text: '溫州',
            value: 'Wenzhou',
            children: [
              { text: '鹿城區(qū)', value: 'Lucheng' },
              { text: '甌海區(qū)', value: 'Ouhai' },
            ],
          },
        ],
      },
      {
        text: '福建',
        value: 'Fujian',
        children: [
          {
            text: '福州',
            value: 'Fuzhou',
            children: [
              { text: '鼓樓區(qū)', value: 'Gulou' },
              { text: '臺江區(qū)', value: 'Taijiang' },
            ],
          },
          {
            text: '廈門',
            value: 'Xiamen',
            children: [
              { text: '思明區(qū)', value: 'Siming' },
              { text: '海滄區(qū)', value: 'Haicang' },
            ],
          },
        ],
      },
    ];

    return { columns };
  },
};

級聯(lián)選擇的數(shù)據(jù)嵌套深度需要保持一致，如果部分選項沒有子選項，可以使用空字符串進(jìn)行占位。

禁用選項

選項可以為對象結(jié)構(gòu)，通過設(shè)置 ?disabled? 來禁用該選項。

<van-picker :columns="columns" />

export default {
  setup() {
    const columns = [
      { text: '杭州', value: 'Hangzhou', disabled: true },
      { text: '寧波', value: 'Ningbo' },
      { text: '溫州', value: 'Wenzhou' },
    ];
    return { columns };
  },
};

加載狀態(tài)

若選擇器數(shù)據(jù)是異步獲取的，可以通過 ?loading? 屬性顯示加載提示。

<van-picker :columns="columns" :loading="loading" />

import { ref } from 'vue';

export default {
  setup() {
    const columns = ref([]);
    const loading = ref(true);

    setTimeout(() => {
      columns.value = [{ text: '選項', value: 'option' }];
      loading.value = false;
    }, 1000);

    return { columns, loading };
  },
};

自定義 Columns 的結(jié)構(gòu)

<van-picker
  :title="標(biāo)題"
  :columns="columns"
  :columns-field-names="customFieldName"
/>

export default {
  setup() {
    const columns = [
      {
        cityName: '浙江',
        cities: [
          {
            cityName: '杭州',
            cities: [{ cityName: '西湖區(qū)' }, { cityName: '余杭區(qū)' }],
          },
          {
            cityName: '溫州',
            cities: [{ cityName: '鹿城區(qū)' }, { cityName: '甌海區(qū)' }],
          },
        ],
      },
      {
        cityName: '福建',
        cities: [
          {
            cityName: '福州',
            cities: [{ cityName: '鼓樓區(qū)' }, { cityName: '臺江區(qū)' }],
          },
          {
            cityName: '廈門',
            cities: [{ cityName: '思明區(qū)' }, { cityName: '海滄區(qū)' }],
          },
        ],
      },
    ];

    const customFieldName = {
      text: 'cityName',
      value: 'cityName',
      children: 'cities',
    };

    return {
      columns,
      customFieldName,
    };
  },
};

API

Props

Events

Slots

PickerOption 數(shù)據(jù)結(jié)構(gòu)

方法

通過 ref 可以獲取到 Picker 實例并調(diào)用實例方法，詳見組件實例方法。

類型定義

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

import type {
  PickerProps,
  PickerColumn,
  PickerOption,
  PickerInstance,
  PickerFieldNames,
  PickerToolbarPosition,
  PickerCancelEventParams,
  PickerChangeEventParams,
  PickerConfirmEventParams,
} from 'vant';

?PickerInstance? 是組件實例的類型，用法如下：

import { ref } from 'vue';
import type { PickerInstance } from 'vant';

const pickerRef = ref<PickerInstance>();

pickerRef.value?.confirm();

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。

常見問題

在桌面端無法操作組件？

參見桌面端適配。