import{c as t,o as e,C as n}from"./vendor.870c33cc.js";const a={class:"markdown-body"},l=n('

Picker 选择器

介绍

提供多个选项集合供用户选择其中一项。

安装

import { createApp } from 'vue';\nimport { Picker } from '@nutui/nutui@taro';\n\nconst app = createApp();\napp.use(Picker);\n

代码演示

基础用法

<nut-picker mode="selector" :list-data="listData" @confirm="confirm">\n  <nut-cell title="请选择城市" :desc="desc"></nut-cell>\n</nut-picker>\n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const listData = [\n      '南京市',\n      '无锡市',\n      '海北藏族自治区',\n      '北京市',\n      '连云港市',\n      '浙江市',\n      '江苏市'\n    ];\n    const desc = ref(listData[0]);\n    const confirm = (value: any, res: any) => {\n      desc.value = res;\n    };\n\n    return {\n      listData,\n      confirm,\n      desc\n    };\n  }\n});\n</script>\n

多列样式

<nut-picker mode="multiSelector" :list-data="listData" @confirm="confirm">\n  <nut-cell title="请选择时间" :desc="desc"></nut-cell>\n</nut-picker>\n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const listData = ref([\n      {\n        values: ['周一', '周二', '周三', '周四', '周五'],\n        defaultIndex: 2\n      },\n      {\n        values: ['上午', '下午', '晚上'],\n        defaultIndex: 1\n      }\n    ]);\n    const desc = ref(\n      `${listData.value[0].values[listData.value[0].defaultIndex]} ${\n        listData.value[1].values[listData.value[1].defaultIndex]\n      }`\n    );\n    const confirm = (value: any, res: any) => {\n      desc.value = res.join(' ');\n      listData.value.forEach((item, idx) => {\n        item.defaultIndex = value[idx];\n      });\n    };\n\n    return {\n      listData,\n      confirm,\n      desc\n    };\n  }\n});\n</script>\n

API

Props

参数	说明	类型	默认值
list-data	列表数据	Array	-
mode	选择类型	String	selector

Events

事件名	说明	回调参数
confirm	点击确认时候触发	event: Event

',17),r={expose:[],setup:n=>(n,r)=>(e(),t("div",a,[l]))};export default r;