Vant Picker 選擇器

介紹

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

引入

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

Vue.use(Picker);

代碼演示

基礎(chǔ)用法

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

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

import { Toast } from 'vant';

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

默認(rèn)選中項(xiàng)

單列選擇時(shí)，可以通過(guò)default-index屬性設(shè)置初始選中項(xiàng)的索引

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

展示頂部欄

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

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

import { Toast } from 'vant';

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

多列選擇

通過(guò)columns屬性可以配置多列選擇

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

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

級(jí)聯(lián)選擇

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

<van-picker show-toolbar title="標(biāo)題" :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: '臺(tái)江區(qū)' }]
        }, {
          text: '廈門',
          children: [{ text: '思明區(qū)' }, { text: '海滄區(qū)' }]
        }]
      }]
    };
  }
};

禁用選項(xiàng)

選項(xiàng)可以為對(duì)象結(jié)構(gòu)，通過(guò)設(shè)置 disabled 來(lái)禁用該選項(xiàng)

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

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

動(dòng)態(tài)設(shè)置選項(xiàng)

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

<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ù)是異步獲取的，可以通過(guò) loading 屬性顯示加載提示

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

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

搭配彈出層使用

在實(shí)際場(chǎng)景中，Picker 通常作為用于輔助表單填寫，可以搭配 Popup 和 Field 實(shí)現(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

當(dāng)選擇器有多列時(shí)，事件回調(diào)參數(shù)會(huì)返回?cái)?shù)組

Slots

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

當(dāng)傳入多列數(shù)據(jù)時(shí)，columns為一個(gè)對(duì)象數(shù)組，數(shù)組中的每一個(gè)對(duì)象配置每一列，每一列有以下key

方法

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

常見(jiàn)問(wèn)題

在桌面端無(wú)法操作組件？

參見(jiàn)在桌面端使用。