如何使用Vant的日历组件选择日期？

翻滚的胖子
2023-07-18 10:07:53
前端技术
JavaScript Java

一、引入Vant库

首先，我们需要在HTML文件的头部引入Vant库的CSS样式文件和JavaScript脚本文件：

<link rel="stylesheet" href="vant.css">
<script src="vant.js"></script>

二、使用日历组件

接下来，在需要使用日历组件的地方添加一个`van-calendar`标签：

<van-calendar v-model="date" @confirm="onConfirm" />

上述代码中，`v-model`绑定了一个`date`变量，用于存储选择的日期，`@confirm`监听了确认按钮的点击事件，当用户选择完日期后，会触发`onConfirm`函数。

三、编写onConfirm函数

我们需要在Vue实例中编写`onConfirm`函数，用于处理用户选择日期后的逻辑：

methods: {
  onConfirm(date) {
    console.log('选择的日期是：', date);
  }
}

上述代码中，`onConfirm`函数接收一个`date`参数，表示用户选择的日期，我们可以在该函数中对选择的日期进行处理，例如打印到控制台。

四、完整代码案例

下面是一个完整的使用Vant日历组件选择日期的代码案例：

<template>
  <div>
    <van-calendar v-model="date" @confirm="onConfirm" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      date: ''
    }
  },
  methods: {
    onConfirm(date) {
      console.log('选择的日期是：', date);
    }
  }
}
</script>