vue3 van-picker 使用template

在 Vue3 中，`van-picker` 是 Vant UI 的一个组件，它提供了一个日期选择器。如果你想在模板中使用它，首先需要安装 `vant` 和 `@vant/picker` 包。假设你已经在你的项目中引入了这两个依赖，以下是使用模板的基本步骤：

1. 引入组件：

<template>
  <van-picker v-model="pickerValue" :options="pickerOptions" />
</template>

2. 定义数据属性 `pickerValue` 用于存储用户选择的值：

<script setup>
import { ref } from 'vue';
const pickerValue = ref('');
</script>

3. 定义选项对象 `pickerOptions`，它可以包含各种配置，如默认选中日期、是否显示周等：

<script setup>
import { defineProps } from 'vue';

// 定义props接收picker配置
const props = defineProps({
  pickerOptions: {
    type: Object,
    default: () => ({
      start: new Date(),
      end: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 未来一周
    }),
  },
});
</script>

4. 当你需要获取或更新 `pickerValue` 时，可以直接操作这个数据绑定：

完整示例：

<template>
  <div>
    <van-picker v-model="pickerValue" :options="pickerOptions" />
    <p>选择的日期：{{ pickerValue }}</p>
  </div>
</template>

<script setup>
import { ref, defineProps } from 'vue';

const pickerValue = ref('');
const props = defineProps({
  pickerOptions: {
    type: Object,
    default: () => ({
      start: new Date(),
      end: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
    }),
  },
});

onMounted(() => {
  // 可能需要设置默认值或其他初始化操作
});
</script>