Vant Calendar 是 Vant UI 组件库中的一个日历组件,用于在 Vue.js 项目中方便地实现日历功能。以下是一个简单的例子,展示如何在 Vue 项目中使用 Vant Calendar:

首先,确保你已经安装了 Vant UI 组件库。你可以通过 npm 或 yarn 安装:
npm install vant
# 或者
yarn add vant

然后,在你的 Vue 项目中,可以这样使用 Vant Calendar 组件:
<template>
  <div>
    <van-calendar v-model="currentDate" @confirm="onConfirm" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentDate: new Date(),
    };
  },
  methods: {
    onConfirm(date) {
      console.log('选中日期:', date);
    },
  },
};
</script>

<style>
/* 在这里可以添加样式 */
</style>

在这个例子中,我们使用了<van-calendar>组件,并通过v-model绑定了当前选中的日期。当用户点击确认按钮时,会触发@confirm事件,我们在onConfirm方法中输出选中的日期。

请确保在你的项目中正确引入了 Vant UI 组件库,并按照文档中的方式进行配置。这只是一个简单的例子,你可以根据实际需求进一步配置和定制 Vant Calendar 组件。


转载请注明出处:http://www.pingtaimeng.com/article/detail/5655/Vant