import{c as t,o as n,A as e}from"./vendor.80bf15c7.js";const o={class:"markdown-body"},l=e('

picker组件

介绍

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

安装

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

代码演示

基础用法

<nut-cell title="请选择城市" :desc="desc" @click="open"></nut-cell>\n<nut-picker\n    v-model:is-visible="show"\n    :list-data="listData"\n    title="城市选择"\n    @confirm="confirm" \n></nut-picker>\n

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

多列样式

<nut-cell title="请选择时间" :desc="desc" @click="open"></nut-cell>\n<nut-picker\n    v-model:is-visible="show"\n    :list-data="listData"\n    title="多列选择"\n    @confirm="confirm"\n    @close="close"\n></nut-picker>\n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const show = ref(false);\n    const listData = [\n      {\n        values: ['周一', '周二', '周三', '周四', '周五'],\n        defaultIndex: 2\n      },\n      // 第二列\n      {\n        values: ['上午', '下午', '晚上'],\n        defaultIndex: 1\n      }\n    ];\n\n    return {\n      listData,\n      open: (index) => {\n        show.value = true;\n      },\n      confirm: (res) => {\n        desc.value = res.join(' ');\n      }\n    };\n  }\n});\n</script>\n

多级联动

<nut-cell title="地址" :desc="desc" @click="open"></nut-cell>\n<nut-picker\n    v-model:is-visible="show"\n    :list-data="listData"\n    title="地址选择"\n    @confirm="confirm" \n></nut-picker>\n

<script>\nexport default createDemo({\n  setup(props, { emit }) {\n    const show = ref(false);\n    const listData = [\n      {\n        text: '浙江',\n        children: [\n          {\n            text: '杭州',\n            children: [{ text: '西湖区' }, { text: '余杭区' }]\n          },\n          {\n            text: '温州',\n            children: [{ text: '鹿城区' }, { text: '瓯海区' }]\n          }\n        ]\n      },\n      {\n        text: '福建',\n        children: [\n          {\n            text: '福州',\n            children: [{ text: '鼓楼区' }, { text: '台江区' }]\n          },\n          {\n            text: '厦门',\n            children: [{ text: '思明区' }, { text: '海沧区' }]\n          }\n        ]\n      }\n    ];\n\n    return {\n      listData,\n      open: (index) => {\n        show.value = true;\n      },\n      confirm: (res) => {\n        desc.value = res.join(' ');\n      }\n    };\n  }\n});\n</script>\n

API

Props

参数	说明	类型	默认值
is-visible	是否可见	Boolean	false
title	设置标题	String	-
list-data	列表数据	Array	-
default-value-index	初始选中项的索引，默认为 0	number	0

Events

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

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