Vant Picker 選擇器

介紹

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

引入

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

Vue.use(Picker);

代碼演示

基礎用法

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

<van-picker :columns="columns" @change="onChange" />

import { Toast } from 'vant';

export default {
  data() {
    return {
      columns: ['杭州', '寧波', '溫州', '嘉興', '湖州']
    };
  },
  methods: {
    onChange(picker, value, index) {
      Toast(`當前值：${value}, 當前索引：${index}`);
    }
  }
};

默認選中項

單列選擇時，可以通過default-index屬性設置初始選中項的索引

<van-picker :columns="columns" :default-index="2" />

展示頂部欄

設置show-toolbar屬性后會展示頂部操作欄，點擊確認按鈕觸發(fā)confirm事件，點擊取消按鈕觸發(fā)cancel事件

<van-picker
  show-toolbar
  title="標題"
  :columns="columns"
  @cancel="onCancel"
  @confirm="onConfirm"
/>

import { Toast } from 'vant';

export default {
  data() {
    return {
      columns: ['杭州', '寧波', '溫州', '嘉興', '湖州']
    }
  },
  methods: {
    onConfirm(value, index) {
      Toast(`當前值：${value}, 當前索引：${index}`);
    },
    onCancel() {
      Toast('取消');
    }
  }
};

多列選擇

通過columns屬性可以配置多列選擇

<van-picker show-toolbar title="標題" :columns="columns" />

export default {
  data() {
    return {
      columns: [
        // 第一列
        {
          values: ['周一', '周二', '周三', '周四', '周五'],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['上午', '下午', '晚上'],
          defaultIndex: 1
        }
      ]
    };
  }
};

級聯(lián)選擇

使用columns的children字段可以實現(xiàn)選項級聯(lián)的效果（從 2.4.5 版本開始支持）

<van-picker show-toolbar title="標題" :columns="columns" />

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

禁用選項

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

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

export default {
  data() {
    return {
      columns: [
        { text: '杭州', disabled: true },
        { text: '寧波' },
        { text: '溫州' }
      ]
    };
  }
};

動態(tài)設置選項

通過 Picker 上的實例方法可以更靈活地控制選擇器，比如使用setColumnValues方法實現(xiàn)多列聯(lián)動

<van-picker :columns="columns" @change="onChange" />

const citys = {
  '浙江': ['杭州', '寧波', '溫州', '嘉興', '湖州'],
  '福建': ['福州', '廈門', '莆田', '三明', '泉州']
};

export default {
  data() {
    return {
      columns: [
        { values: Object.keys(citys) },
        { values: citys['浙江'] }
      ]
    };
  },
  methods: {
    onChange(picker, values) {
      picker.setColumnValues(1, citys[values[0]]);
    }
  }
};

加載狀態(tài)

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

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

export default {
  data() {
    return {
      columns: [],
      loading: true
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
      this.columns = ['選項'];
    }, 1000);
  }
};

搭配彈出層使用

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

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

export default {
  data() {
    return {
      value: '',
      showPicker: false,
      columns: ['杭州', '寧波', '溫州', '嘉興', '湖州']
    }
  },
  methods: {
    onConfirm(value) {
      this.value = value;
      this.showPicker = false;
    }
  }
};

API

Props

Events

當選擇器有多列時，事件回調(diào)參數(shù)會返回數(shù)組

Slots

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

當傳入多列數(shù)據(jù)時，columns為一個對象數(shù)組，數(shù)組中的每一個對象配置每一列，每一列有以下key

方法

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

常見問題

在桌面端無法操作組件？

參見在桌面端使用。