首先，确保你已经安装了Vant3组件库。你可以使用npm或者yarn进行安装：
npm install vant@next
# 或者
yarn add vant@next
然后，在你的Vue组件中引入并注册Picker组件：
<template>
<div>
<van-picker
v-model="selectedValue"
:columns="columns"
@change="onChange"
:title="title"
>
<template #title>
<div class="custom-picker-title">{{ title }}</div>
</template>
</van-picker>
</div>
</template>
<script>
import { ref } from 'vue';
import { Picker } from 'vant';
export default {
components: {
[Picker.name]: Picker,
},
setup() {
const selectedValue = ref('');
const title = '请选择';
const columns = [
{
values: ['Option1', 'Option2', 'Option3'],
},
{
values: ['Value1', 'Value2', 'Value3'],
},
];
const onChange = (pickerValue) => {
console.log('选中的值：', pickerValue);
};
return {
selectedValue,
title,
columns,
onChange,
};
},
};
</script>
<style scoped>
.custom-picker-title {
padding: 16px;
font-size: 16px;
color: #333;
background-color: #f7f7f7;
}
</style>
在上述例子中，我们使用Vue 3的ref函数创建一个响应式的selectedValue变量，用于存储选择器中的值。然后，我们在模板中使用<van-picker>标签引入了Vant3的Picker组件，并通过v-model将selectedValue与选择器的值进行绑定。通过:columns指定选择器的列数和选项。通过@change监听选择器值的变化事件，触发onChange方法。
此外，我们使用了一个自定义的标题模板，可以根据实际需求进行调整。
请确保你的项目已正确配置Vant3，并根据你的实际需求调整代码。
转载请注明出处：http://www.zyzy.cn/article/detail/5725/Vant