前端 vue v-calendar 日历组件_npm install vv-calendar -s-优快云博客

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

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;
                }
  }