import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},p=t(`

Picker \u9009\u62E9\u5668

\u4ECB\u7ECD

\u63D0\u4F9B\u591A\u4E2A\u9009\u9879\u96C6\u5408\u4F9B\u7528\u6237\u9009\u62E9\uFF0C\u652F\u6301\u5355\u5217\u9009\u62E9\u548C\u591A\u5217\u7EA7\u8054\uFF0C\u901A\u5E38\u4E0E\u5F39\u51FA\u5C42\u7EC4\u4EF6\u914D\u5408\u4F7F\u7528\u3002

\u5F15\u5165

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

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

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

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

\u9009\u9879\u914D\u7F6E

Picker \u7EC4\u4EF6\u901A\u8FC7 columns \u5C5E\u6027\u914D\u7F6E\u9009\u9879\u6570\u636E\uFF0Ccolumns \u662F\u4E00\u4E2A\u5305\u542B\u5B57\u7B26\u4E32\u6216\u5BF9\u8C61\u7684\u6570\u7EC4\u3002

\u9876\u90E8\u680F

\u9876\u90E8\u680F\u5305\u542B\u6807\u9898\u3001\u786E\u8BA4\u6309\u94AE\u548C\u53D6\u6D88\u6309\u94AE\uFF0C\u70B9\u51FB\u786E\u8BA4\u6309\u94AE\u89E6\u53D1 confirm \u4E8B\u4EF6\uFF0C\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u89E6\u53D1 cancel \u4E8B\u4EF6\u3002

<van-picker
  title="\u6807\u9898"
  :columns="columns"
  @confirm="onConfirm"
  @cancel="onCancel"
  @change="onChange"
/>

import { Toast } from 'vant';

export default {
  setup() {
    const columns = ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u7ECD\u5174', '\u6E56\u5DDE', '\u5609\u5174', '\u91D1\u534E'];

    const onConfirm = (value, index) => {
      Toast(\`\u5F53\u524D\u503C: \${value}, \u5F53\u524D\u7D22\u5F15: \${index}\`);
    };
    const onChange = (value, index) => {
      Toast(\`\u5F53\u524D\u503C: \${value}, \u5F53\u524D\u7D22\u5F15: \${index}\`);
    };
    const onCancel = () => Toast('\u53D6\u6D88');

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

\u9ED8\u8BA4\u9009\u4E2D\u9879

\u5355\u5217\u9009\u62E9\u65F6\uFF0C\u53EF\u4EE5\u901A\u8FC7 default-index \u5C5E\u6027\u8BBE\u7F6E\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\u3002

<van-picker title="\u6807\u9898" :columns="columns" :default-index="2" />

\u591A\u5217\u9009\u62E9

columns \u5C5E\u6027\u53EF\u4EE5\u901A\u8FC7\u5BF9\u8C61\u6570\u7EC4\u7684\u5F62\u5F0F\u914D\u7F6E\u591A\u5217\u9009\u62E9\uFF0C\u5BF9\u8C61\u4E2D\u53EF\u4EE5\u914D\u7F6E\u9009\u9879\u6570\u636E\u3001\u521D\u59CB\u9009\u4E2D\u9879\u7B49\uFF0C\u8BE6\u7EC6\u683C\u5F0F\u89C1\u4E0B\u65B9\u8868\u683C\u3002

<van-picker title="\u6807\u9898" :columns="columns" />

export default {
  setup() {
    const columns = [
      // \u7B2C\u4E00\u5217
      {
        values: ['\u5468\u4E00', '\u5468\u4E8C', '\u5468\u4E09', '\u5468\u56DB', '\u5468\u4E94'],
        defaultIndex: 2,
      },
      // \u7B2C\u4E8C\u5217
      {
        values: ['\u4E0A\u5348', '\u4E0B\u5348', '\u665A\u4E0A'],
        defaultIndex: 1,
      },
    ];

    return { columns };
  },
};

\u7EA7\u8054\u9009\u62E9

\u4F7F\u7528 columns \u7684 children \u5B57\u6BB5\u53EF\u4EE5\u5B9E\u73B0\u9009\u9879\u7EA7\u8054\u7684\u6548\u679C\u3002\u5982\u679C\u7EA7\u8054\u5C42\u7EA7\u8F83\u591A\uFF0C\u63A8\u8350\u4F7F\u7528 Cascader \u7EA7\u8054\u9009\u9879\u7EC4\u4EF6\u3002

<van-picker title="\u6807\u9898" :columns="columns" />

export default {
  setup() {
    const columns = [
      {
        text: '\u6D59\u6C5F',
        children: [
          {
            text: '\u676D\u5DDE',
            children: [{ text: '\u897F\u6E56\u533A' }, { text: '\u4F59\u676D\u533A' }],
          },
          {
            text: '\u6E29\u5DDE',
            children: [{ text: '\u9E7F\u57CE\u533A' }, { text: '\u74EF\u6D77\u533A' }],
          },
        ],
      },
      {
        text: '\u798F\u5EFA',
        children: [
          {
            text: '\u798F\u5DDE',
            children: [{ text: '\u9F13\u697C\u533A' }, { text: '\u53F0\u6C5F\u533A' }],
          },
          {
            text: '\u53A6\u95E8',
            children: [{ text: '\u601D\u660E\u533A' }, { text: '\u6D77\u6CA7\u533A' }],
          },
        ],
      },
    ];

    return { columns };
  },
};

\u7EA7\u8054\u9009\u62E9\u7684\u6570\u636E\u5D4C\u5957\u6DF1\u5EA6\u9700\u8981\u4FDD\u6301\u4E00\u81F4\uFF0C\u5982\u679C\u90E8\u5206\u9009\u9879\u6CA1\u6709\u5B50\u9009\u9879\uFF0C\u53EF\u4EE5\u4F7F\u7528\u7A7A\u5B57\u7B26\u4E32\u8FDB\u884C\u5360\u4F4D\u3002

\u7981\u7528\u9009\u9879

\u9009\u9879\u53EF\u4EE5\u4E3A\u5BF9\u8C61\u7ED3\u6784\uFF0C\u901A\u8FC7\u8BBE\u7F6E disabled \u6765\u7981\u7528\u8BE5\u9009\u9879\u3002

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

export default {
  setup() {
    const columns = [
      { text: '\u676D\u5DDE', disabled: true },
      { text: '\u5B81\u6CE2' },
      { text: '\u6E29\u5DDE' },
    ];

    return { columns };
  },
};

\u52A8\u6001\u8BBE\u7F6E\u9009\u9879

\u901A\u8FC7 Picker \u4E0A\u7684\u5B9E\u4F8B\u65B9\u6CD5\u53EF\u4EE5\u66F4\u7075\u6D3B\u5730\u63A7\u5236\u9009\u62E9\u5668\uFF0C\u6BD4\u5982\u4F7F\u7528 setColumnValues \u65B9\u6CD5\u5B9E\u73B0\u591A\u5217\u8054\u52A8\u3002

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

import { ref } from 'vue';

export default {
  setup() {
    const picker = ref(null);

    const cities = {
      \u6D59\u6C5F: ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u5609\u5174', '\u6E56\u5DDE'],
      \u798F\u5EFA: ['\u798F\u5DDE', '\u53A6\u95E8', '\u8386\u7530', '\u4E09\u660E', '\u6CC9\u5DDE'],
    };
    const columns = [
      { values: Object.keys(cities) },
      { values: cities['\u6D59\u6C5F'] },
    ];

    const onChange = (values) => {
      picker.value.setColumnValues(1, cities[values[0]]);
    };

    return {
      picker,
      columns,
      onChange,
    };
  },
};

\u52A0\u8F7D\u72B6\u6001

\u82E5\u9009\u62E9\u5668\u6570\u636E\u662F\u5F02\u6B65\u83B7\u53D6\u7684\uFF0C\u53EF\u4EE5\u901A\u8FC7 loading \u5C5E\u6027\u663E\u793A\u52A0\u8F7D\u63D0\u793A\u3002

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

import { ref } from 'vue';

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

    setTimeout(() => {
      columns.value = ['\u9009\u9879'];
      loading.value = false;
    }, 1000);

    return { columns, loading };
  },
};

\u642D\u914D\u5F39\u51FA\u5C42\u4F7F\u7528

\u5728\u5B9E\u9645\u573A\u666F\u4E2D\uFF0CPicker \u901A\u5E38\u4F5C\u4E3A\u7528\u4E8E\u8F85\u52A9\u8868\u5355\u586B\u5199\uFF0C\u53EF\u4EE5\u642D\u914D Popup \u548C Field \u5B9E\u73B0\u8BE5\u6548\u679C\u3002

<van-field
  v-model="value"
  is-link
  readonly
  label="\u57CE\u5E02"
  placeholder="\u9009\u62E9\u57CE\u5E02"
  @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 = ['\u676D\u5DDE', '\u5B81\u6CE2', '\u6E29\u5DDE', '\u7ECD\u5174', '\u6E56\u5DDE', '\u5609\u5174', '\u91D1\u534E'];
    const result = ref('');
    const showPicker = ref(false);

    const onConfirm = (value) => {
      result.value = value;
      showPicker.value = false;
    };

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

\u81EA\u5B9A\u4E49 Columns \u7684\u7ED3\u6784

<van-picker
  :title="\u6807\u9898"
  :columns="columns"
  :columns-field-names="customFieldName"
/>

export default {
  setup() {
    const columns = [
      {
        cityName: '\u6D59\u6C5F',
        cities: [
          {
            cityName: '\u676D\u5DDE',
            cities: [{ cityName: '\u897F\u6E56\u533A' }, { cityName: '\u4F59\u676D\u533A' }],
          },
          {
            cityName: '\u6E29\u5DDE',
            cities: [{ cityName: '\u9E7F\u57CE\u533A' }, { cityName: '\u74EF\u6D77\u533A' }],
          },
        ],
      },
      {
        cityName: '\u798F\u5EFA',
        cities: [
          {
            cityName: '\u798F\u5DDE',
            cities: [{ cityName: '\u9F13\u697C\u533A' }, { cityName: '\u53F0\u6C5F\u533A' }],
          },
          {
            cityName: '\u53A6\u95E8',
            cities: [{ cityName: '\u601D\u660E\u533A' }, { cityName: '\u6D77\u6CA7\u533A' }],
          },
        ],
      },
    ];

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

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

API

Props

\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
columns\u5BF9\u8C61\u6570\u7EC4\uFF0C\u914D\u7F6E\u6BCF\u4E00\u5217\u663E\u793A\u7684\u6570\u636EColumn[][]
columns-field-names\u81EA\u5B9A\u4E49 columns \u7ED3\u6784\u4E2D\u7684\u5B57\u6BB5object{ text: 'text', values: 'values', children: 'children' }
title\u9876\u90E8\u680F\u6807\u9898string-
confirm-button-text\u786E\u8BA4\u6309\u94AE\u6587\u5B57string\u786E\u8BA4
cancel-button-text\u53D6\u6D88\u6309\u94AE\u6587\u5B57string\u53D6\u6D88
toolbar-position\u9876\u90E8\u680F\u4F4D\u7F6E\uFF0C\u53EF\u9009\u503C\u4E3A bottomstringtop
loading\u662F\u5426\u663E\u793A\u52A0\u8F7D\u72B6\u6001booleanfalse
show-toolbar\u662F\u5426\u663E\u793A\u9876\u90E8\u680Fbooleantrue
allow-html\u662F\u5426\u5141\u8BB8\u9009\u9879\u5185\u5BB9\u4E2D\u6E32\u67D3 HTMLbooleanfalse
default-index\u5355\u5217\u9009\u62E9\u65F6\uFF0C\u9ED8\u8BA4\u9009\u4E2D\u9879\u7684\u7D22\u5F15number | string0
item-height\u9009\u9879\u9AD8\u5EA6\uFF0C\u652F\u6301 px vw vh rem \u5355\u4F4D\uFF0C\u9ED8\u8BA4 pxnumber | string44
visible-item-count\u53EF\u89C1\u7684\u9009\u9879\u4E2A\u6570number | string6
swipe-duration\u5FEB\u901F\u6ED1\u52A8\u65F6\u60EF\u6027\u6EDA\u52A8\u7684\u65F6\u957F\uFF0C\u5355\u4F4D msnumber | string1000

Events

\u5F53\u9009\u62E9\u5668\u6709\u591A\u5217\u65F6\uFF0C\u4E8B\u4EF6\u56DE\u8C03\u53C2\u6570\u4F1A\u8FD4\u56DE\u6570\u7EC4\u3002

\u4E8B\u4EF6\u540D\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
confirm\u70B9\u51FB\u5B8C\u6210\u6309\u94AE\u65F6\u89E6\u53D1\u3002
\u6CE8\u610F\uFF1A\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0C\u8FD4\u56DE\u503C\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002		currentValue: PickerOption | PickerOption[], currentIndex: number | number[]
cancel\u70B9\u51FB\u53D6\u6D88\u6309\u94AE\u65F6\u89E6\u53D1\u3002
\u6CE8\u610F\uFF1A\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0C\u8FD4\u56DE\u503C\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002		currentValue: PickerOption | PickerOption[], currentIndex: number | number[]
change\u9009\u9879\u6539\u53D8\u65F6\u89E6\u53D1\u3002
\u6CE8\u610F\uFF1A\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0C\u8FD4\u56DE\u503C\u4E3A\u6570\u7EC4\u683C\u5F0F\u3002		currentValue: PickerOption | PickerOption[], currentIndex: number | number[]

Slots

\u540D\u79F0\u8BF4\u660E\u53C2\u6570
toolbar v3.1.2\u81EA\u5B9A\u4E49\u6574\u4E2A\u9876\u90E8\u680F\u7684\u5185\u5BB9-
title\u81EA\u5B9A\u4E49\u6807\u9898\u5185\u5BB9-
confirm\u81EA\u5B9A\u4E49\u786E\u8BA4\u6309\u94AE\u5185\u5BB9-
cancel\u81EA\u5B9A\u4E49\u53D6\u6D88\u6309\u94AE\u5185\u5BB9-
option\u81EA\u5B9A\u4E49\u9009\u9879\u5185\u5BB9option: string | object
columns-top\u81EA\u5B9A\u4E49\u9009\u9879\u4E0A\u65B9\u5185\u5BB9-
columns-bottom\u81EA\u5B9A\u4E49\u9009\u9879\u4E0B\u65B9\u5185\u5BB9-

Column \u6570\u636E\u7ED3\u6784

\u5F53\u4F20\u5165\u591A\u5217\u6570\u636E\u65F6\uFF0Ccolumns \u4E3A\u4E00\u4E2A\u5BF9\u8C61\u6570\u7EC4\uFF0C\u6570\u7EC4\u4E2D\u7684\u6BCF\u4E00\u4E2A\u5BF9\u8C61\u914D\u7F6E\u6BCF\u4E00\u5217\uFF0C\u6BCF\u4E00\u5217\u6709\u4EE5\u4E0B key:

\u952E\u540D\u8BF4\u660E\u7C7B\u578B
values\u5217\u4E2D\u5BF9\u5E94\u7684\u5907\u9009\u503CArray<string | number>
defaultIndex\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\uFF0C\u9ED8\u8BA4\u4E3A 0number
className\u4E3A\u5BF9\u5E94\u5217\u6DFB\u52A0\u989D\u5916\u7684\u7C7B\u540Dstring | Array | object
children\u7EA7\u8054\u9009\u9879Column

\u65B9\u6CD5

\u901A\u8FC7 ref \u53EF\u4EE5\u83B7\u53D6\u5230 Picker \u5B9E\u4F8B\u5E76\u8C03\u7528\u5B9E\u4F8B\u65B9\u6CD5\uFF0C\u8BE6\u89C1\u7EC4\u4EF6\u5B9E\u4F8B\u65B9\u6CD5\u3002

\u65B9\u6CD5\u540D\u8BF4\u660E\u53C2\u6570\u8FD4\u56DE\u503C
getValues\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u7684\u503C-values
setValues\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u7684\u503Cvalues-
getIndexes\u83B7\u53D6\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15-indexes
setIndexes\u8BBE\u7F6E\u6240\u6709\u5217\u9009\u4E2D\u503C\u5BF9\u5E94\u7684\u7D22\u5F15indexes-
getColumnValue\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503CcolumnIndexvalue
setColumnValue\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u7684\u503CcolumnIndex, value-
getColumnIndex\u83B7\u53D6\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15columnIndexoptionIndex
setColumnIndex\u8BBE\u7F6E\u5BF9\u5E94\u5217\u9009\u4E2D\u9879\u7684\u7D22\u5F15columnIndex, optionIndex-
getColumnValues\u83B7\u53D6\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879columnIndexvalues
setColumnValues\u8BBE\u7F6E\u5BF9\u5E94\u5217\u4E2D\u6240\u6709\u9009\u9879columnIndex, values-
confirm\u505C\u6B62\u60EF\u6027\u6EDA\u52A8\u5E76\u89E6\u53D1 confirm \u4E8B\u4EF6--

\u7C7B\u578B\u5B9A\u4E49

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

import type {
  PickerProps,
  PickerColumn,
  PickerOption,
  PickerInstance,
  PickerFieldNames,
  PickerObjectColumn,
  PickerObjectOption,
  PickerToolbarPosition,
} from 'vant';

PickerInstance \u662F\u7EC4\u4EF6\u5B9E\u4F8B\u7684\u7C7B\u578B\uFF0C\u7528\u6CD5\u5982\u4E0B\uFF1A

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

const pickerRef = ref<PickerInstance>();

pickerRef.value?.confirm();

\u4E3B\u9898\u5B9A\u5236

\u6837\u5F0F\u53D8\u91CF

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-picker-background-colorvar(--van-background-color-light)-
--van-picker-toolbar-height44px-
--van-picker-title-font-sizevar(--van-font-size-lg)-
--van-picker-title-line-heightvar(--van-line-height-md)-
--van-picker-action-padding0 var(--van-padding-md)-
--van-picker-action-font-sizevar(--van-font-size-md)-
--van-picker-confirm-action-colorvar(--van-text-link-color)-
--van-picker-cancel-action-colorvar(--van-text-color-2)-
--van-picker-option-padding0 var(--van-padding-base)-
--van-picker-option-font-sizevar(--van-font-size-lg)-
--van-picker-option-text-colorvar(--van-text-color)-
--van-picker-option-disabled-opacity0.3-
--van-picker-mask-colorlinear-gradient-
--van-picker-loading-icon-colorvar(--van-primary-color)-
--van-picker-loading-mask-colorrgba(255, 255, 255, 0.9)-

\u5E38\u89C1\u95EE\u9898

\u5728\u684C\u9762\u7AEF\u65E0\u6CD5\u64CD\u4F5C\u7EC4\u4EF6\uFF1F

\u53C2\u89C1\u684C\u9762\u7AEF\u9002\u914D\u3002

`,24),e=[p],h={__name:"README.zh-CN",setup(c,{expose:s}){return s({frontmatter:{}}),(r,o)=>(a(),n("div",l,e))}};export{h as default};