前端 vue v-calendar 日历组件

最新推荐文章于 2025-06-09 09:05:14 发布

许宁X杨一潇

最新推荐文章于 2025-06-09 09:05:14 发布

阅读量4.4k

点赞数 2

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/addlxx/article/details/117368897

本文介绍了如何在 Vue 项目中使用 v-calendar 组件。首先通过 npm 安装 v-calendar，然后在 main.js 文件中引入并注册。接着展示了在组件中如何监听和获取日历的年月信息，包括在 mounted 生命周期钩子中获取初始年月以及在改变月份时更新年月的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue v-calendar 的日历组件的使用

1.安装
npm install v-calendar;
import VCalendar from ‘v-calendar’;
在main.js:
import VCalendar from ‘v-calendar’; // 引入日历插件
Vue.use(VCalendar, {
componentPrefix: ‘vc’
2.使用

<v-calendar :attributes='attributes' @dayclick="onDayClick"  v-on:choseDay="clickDay"  ref="calendars" is-expanded @transition-start="dateTime" ></v-calendar>

  data() {
            return {
                calendar: '请选择日历',
                calendar_list: [],
                selectedDate: [],
                days: [],  //所选择的日期
                calendars:'',
                }

点击的时候获取年月份

 //改变时
            onDayClick(day) {
                
               

            },

如果想进来的时候获取年月份在mounted里面执行ref

  mounted: function () {
            this.calendars=this.$refs.calendars;
            this.moth =this.calendars.firstPage.month;
            this.year = this.calendars.firstPage.year;
            }

改变月份时获取年和月;

  methods: {
   dateTime(value){
                this.calendars=this.$refs.calendars;
                this.moth =this.calendars.firstPage.month;
                this.year = this.calendars.firstPage.year;
                }
  }