vant代码实现弹出年月日选择

下面是一个使用vant组件库实现弹出年月日选择的示例代码：

<template>
  <div>
    <van-field
      v-model="date"
      readonly
      label="选择日期"
      placeholder="请选择日期"
      @click="showDatePicker"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="date"
        type="date"
        @confirm="hideDatePicker"
        @cancel="hideDatePicker"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: '',
      showPicker: false
    };
  },
  methods: {
    showDatePicker() {
      this.showPicker = true;
    },
    hideDatePicker() {
      this.showPicker = false;
    }
  }
};
</script>

在代码中，我们使用了vant组件库的Field和Popup组件来实现弹出选择器的效果。当点击日期输入框时，调用showDatePicker方法显示日期选择器弹窗，并将showPicker属性设置为true。在日期选择器的确认或取消事件中，调用hideDatePicker方法隐藏日期选择器弹窗，并将showPicker属性设置为false。同时，使用v-model指令实现双向绑定，将选择的日期保存在date属性中