Vant 组件库实现弹出年月日选择器 - 示例代码

<p>&quot;&quot;&quot;\n<template>\n  <div>\n    &lt;van-field\n      v-model=&quot;date&quot;\n      readonly\n      label=&quot;选择日期&quot;\n      placeholder=&quot;请选择日期&quot;\n      @click=&quot;showDatePicker&quot;\n    /&gt;\n    &lt;van-popup v-model=&quot;showPicker&quot; position=&quot;bottom&quot;&gt;\n      &lt;van-datetime-picker\n        v-model=&quot;date&quot;\n        type=&quot;date&quot;\n        @confirm=&quot;hideDatePicker&quot;\n        @cancel=&quot;hideDatePicker&quot;\n      /&gt;\n    </van-popup>\n  </div>\n</template>\n\n<script>\n  export default {\n    data() {\n      return {\n        date: '',\n        showPicker: false\n      };\n    },\n    methods: {\n      showDatePicker() {\n        this.showPicker = true;\n      },\n      hideDatePicker() {\n        this.showPicker = false;\n      }\n    }\n  };\n</script>\n&quot;&quot;&quot;\n在代码中，我们使用了vant组件库的<code>Field</code>和<code>Popup</code>组件来实现弹出选择器的效果。当点击日期输入框时，调用<code>showDatePicker</code>方法显示日期选择器弹窗，并将<code>showPicker</code>属性设置为<code>true</code>。在日期选择器的确认或取消事件中，调用<code>hideDatePicker</code>方法隐藏日期选择器弹窗，并将<code>showPicker</code>属性设置为<code>false</code>。同时，使用<code>v-model</code>指令实现双向绑定，将选择的日期保存在<code>date</code>属性中。</p>