{site_name}

{site_name}

🌜 搜索

Vant4 Picker 选择器是一个基于 Vue.js 的移动端组件库 Van

前端 𝄐 0
vant的picker选择器,vant picker多选,vant checkbox,vant选项卡,vant 单选框,vant框架picker选择器回显
Vant4 Picker 选择器是一个基于 Vue.js 的移动端组件库 Vant4 中的一种组件,用于在移动端应用中实现数据的选择。

Picker 选择器通过滚轮或列表形式展示可选项,用户可以通过手指上下滑动来选择需要的选项。Picker 选择器通常用于日期、时间、省市区等相关数据的选择。

以下是一个基于 Vant4 Picker 选择器实现的日期选择器的示例代码:

html
<template>
<van-picker :columns="columns" @confirm="onConfirm" />
</template>

<script>
import { reactive } from 'vue';
import { Picker } from 'vant';

export default {
components: {
[Picker.name]: Picker,
},
setup() {
const state = reactive({
columns: [
{
values: ['1990', '1991', '1992', '1993', '1994'],
},
{
values: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
},
{
values: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
},
],
});

const onConfirm = (value) => {
console.log(Selected value: ${value});
};

return {
state,
onConfirm,
};
},
};
</script>


在上面的示例中,我们通过 van-picker 组件来创建一个日期选择器。Picker 的选项通过 columns 属性传递进去,每个 column 都是一列可选项。其中第一列为年份,第二列为月份,第三列为日期。当用户确认所选项后,会触发 confirm 事件并将选中的值作为参数传递给回调函数 onConfirm。