首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-picker：
<template>
<div>
<van-picker
v-model="selectedValue"
:columns="columns"
@confirm="onConfirm"
@cancel="onCancel"
>
<template #title>选择器标题</template>
</van-picker>
</div>
</template>
<script>
import { ref } from 'vue';
import { Picker } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Picker.name]: Picker,
},
setup() {
const selectedValue = ref([]);
const columns = ref([
{ text: '选项1', value: '1' },
{ text: '选项2', value: '2' },
{ text: '选项3', value: '3' },
]);
const onConfirm = () => {
// 在这里处理确认选择事件
console.log('确认选择', selectedValue.value);
};
const onCancel = () => {
// 在这里处理取消选择事件
console.log('取消选择');
};
return {
selectedValue,
columns,
onConfirm,
onCancel,
};
},
};
</script>
在上面的例子中，我们使用了 van-picker 组件，并通过 v-model 指令将选择器的值与一个 Vue 变量 selectedValue 进行双向绑定。
我们通过 :columns 属性设置选择器的选项，每个选项是一个对象，包含 text 表示显示的文本和 value 表示对应的值。
监听了 @confirm 和 @cancel 事件，分别在确认选择和取消选择时触发。你可以在这里处理相应的逻辑。
最后，别忘了引入样式文件，这样样式才能正确应用。
转载请注明出处：http://www.zyzy.cn/article/detail/5808/Vant