import{e as a,o as n,G as t}from"./vendor.bd251973.js";const l={class:"markdown-body"},p=t(`

Picker \u9009\u62E9\u5668

\u4ECB\u7ECD

\u63D0\u4F9B\u591A\u4E2A\u9009\u9879\u96C6\u5408\u4F9B\u7528\u6237\u9009\u62E9\u5176\u4E2D\u4E00\u9879\u3002

\u5B89\u88C5

import { createApp } from 'vue';
import { Picker,Popup } from '@nutui/nutui';

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

\u4EE3\u7801\u6F14\u793A

\u57FA\u7840\u7528\u6CD5

<nut-cell title="\u8BF7\u9009\u62E9\u57CE\u5E02" :desc="desc" @click="open"></nut-cell>
<nut-picker
    v-model:visible="show"
    :list-data="listData"
    title="\u57CE\u5E02\u9009\u62E9"
    @confirm="confirm" 
></nut-picker>

<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const listData = [
      '\u5357\u4EAC\u5E02',
      '\u65E0\u9521\u5E02',
      '\u6D77\u5317\u85CF\u65CF\u81EA\u6CBB\u533A',
      '\u5317\u4EAC\u5E02',
      '\u8FDE\u4E91\u6E2F\u5E02',
      '\u6D59\u6C5F\u5E02',
      '\u6C5F\u82CF\u5E02'
    ];

    return {
      listData,
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = res;
      }
    };
  }
});
</script>

\u591A\u5217\u6837\u5F0F

<nut-cell title="\u8BF7\u9009\u62E9\u65F6\u95F4" :desc="desc" @click="open"></nut-cell>
<nut-picker
    v-model:visible="show"
    :list-data="listData"
    title="\u591A\u5217\u9009\u62E9"
    @confirm="confirm"
    @close="close"
></nut-picker>

<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const listData = [
      {
        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 {
      listData,
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = res.join(' ');
      }
    };
  }
});
</script>

\u591A\u7EA7\u8054\u52A8

<nut-cell title="\u5730\u5740" :desc="desc" @click="open"></nut-cell>
<nut-picker
    v-model:visible="show"
    :list-data="listData"
    title="\u5730\u5740\u9009\u62E9"
    @confirm="confirm" 
></nut-picker>

<script>
export default createDemo({
  setup(props, { emit }) {
    const show = ref(false);
    const listData = [
      {
        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 {
      listData,
      open: (index) => {
        show.value = true;
      },
      confirm: (res) => {
        desc.value = res.join(' ');
      }
    };
  }
});
</script>

API

Props

\u53C2\u6570	\u8BF4\u660E	\u7C7B\u578B	\u9ED8\u8BA4\u503C
v-model:visible	\u662F\u5426\u53EF\u89C1	Boolean	false
title	\u8BBE\u7F6E\u6807\u9898	String	-
cancel-text	\u53D6\u6D88\u6309\u94AE\u6587\u6848	String	\u53D6\u6D88
ok-text	\u786E\u5B9A\u6309\u94AE\u6587\u6848	String	\u786E\u5B9A
list-data	\u5217\u8868\u6570\u636E	Array	-
default-value-index	\u521D\u59CB\u9009\u4E2D\u9879\u7684\u7D22\u5F15\uFF0C\u9ED8\u8BA4\u4E3A 0	number	0
teleport	\u6307\u5B9A\u6302\u8F7D\u8282\u70B9	String	\u201Cbody\u201D
close-on-click-overlay	\u70B9\u51FB\u8499\u5C42\u662F\u5426\u5173\u95ED\u5BF9\u8BDD\u6846	Boolean	false
lock-scroll	\u80CC\u666F\u662F\u5426\u9501\u5B9A	Boolean	false

Events

\u4E8B\u4EF6\u540D	\u8BF4\u660E	\u56DE\u8C03\u53C2\u6570
close	\u5173\u95ED\u5F39\u7A97\u65F6\u89E6\u53D1	event: Event
confirm	\u70B9\u51FB\u786E\u8BA4\u65F6\u5019\u89E6\u53D1	event: Event
change	\u6539\u53D8\u65F6\u89E6\u53D1	val

`,20),c=[p],d={setup(r,{expose:s}){return s({frontmatter:{}}),(h,j)=>(n(),a("div",l,c))}};export{d as default};