原始效果：

修改后的效果：

接下來，我們使用它～

1.安裝

npm i vue-calendar-component --save cnpm i vue-calendar-component --save //國內(nèi)鏡像

2.在使用到日歷插件的文件中引入

import Calendar from 'vue-calendar-component';

?3.原始效果代碼

<template><div class="con"><Calendarv-on:choseDay="clickDay"v-on:changeMonth="changeDate"v-on:isToday="clickToday"></Calendar></div> </template><script> /* eslint-disable */ import Calendar from 'vue-calendar-component'; export default {components: {Calendar},data() {return {};},created() {},methods: {clickDay(data) {console.log(data); //選中某天},changeDate(data) {console.log(data); //左右點(diǎn)擊切換月份},clickToday(data) {console.log(data); // 跳到了本月}}, }; </script>

?4.修改樣式后的代碼

<template><div class="con"><div class="now-data-myself"><div class="now-data-myself-time">{{ date }}</div><div class="now-data-myself-week">{{ week }}</div></div><Calendarv-on:choseDay="clickDay"v-on:changeMonth="changeDate"v-on:isToday="clickToday"></Calendar></div> </template><script> /* eslint-disable */ import Calendar from 'vue-calendar-component'; export default {components: {Calendar},data() {return {date: "",week: ""};},created() {var now = new Date();this.date = now.getDate();//得到日期var day = now.getDay();//得到周幾var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");this.week = arr_week[day];},methods: {clickDay(data) {console.log(data); //選中某天},changeDate(data) {console.log(data); //左右點(diǎn)擊切換月份},clickToday(data) {console.log(data); // 跳到了本月}}, }; </script><style> .now-data-myself {width: 40%;position: absolute;border-right: 1px solid rgba(227, 227, 227, 0.6); } .con {position: relative;max-width: 280px;margin: auto; } .con .wh_content_all {background: transparent !important; } .wh_top_changge li {color: #F56C6C !important;font-size: 15px !important; } .wh_content_item, .wh_content_item_tag {color: #303133 !important; } .wh_content_item .wh_isToday {background: #00d985 !important;color: #fff !important; } .wh_content_item .wh_chose_day {background: #409EFF !important;color: #ffff !important; } .wh_item_date:hover {background: rgb(217, 236, 255) !important;border-radius: 100px !important;color: rgb(102, 177, 255) !important; } .wh_jiantou1[data-v-2ebcbc83] {border-top: 2px solid #909399;border-left: 2px solid #909399;width: 7px;height: 7px; } .wh_jiantou2[data-v-2ebcbc83] {border-top: 2px solid #909399;border-right: 2px solid #909399;width: 7px;height: 7px; } .wh_top_tag[data-v-2ebcbc83] {color: #409EFF;border-top: 1px solid rgba(227, 227, 227, 0.6);border-bottom: 1px solid rgba(227, 227, 227, 0.6); } .wh_container[data-v-2ebcbc83] {max-width: 280px; } .wh_top_changge[data-v-2ebcbc83] {display: flex;width: 50%;margin-left: 43%; } .now-data-myself-time {color: #F56C6C;font-size: 28px;height: 30px;font-family: "Helvetica Neue"; } .now-data-myself-week {font-size: 10px;color: #909399; } .wh_top_changge .wh_content_li[data-v-2ebcbc83] {font-family: Helvetica; } </style>

API

屬性說明默認(rèn)是否必傳

choseDay	選中某天調(diào)用的方法，返回選中的日期 YY-MM-DD	無	否
changeMonth	切換月份調(diào)用的方法，返回切換到某月的日期 YY-MM-DD	無	否
isToday	切換月份的時候，如果切到當(dāng)前月份，調(diào)用這個方法，返回當(dāng)前月今天	無	否
markDate	如果需要某月的幾天被標(biāo)注，傳當(dāng)月的日期數(shù)組。如["2018/2/2","2018/2/6"]被會標(biāo)注（相同的標(biāo)記）	空數(shù)組	否
markDateMore	需要不同的標(biāo)記如上Usage 最后一行示例代碼	空數(shù)組	否
agoDayHide	某個日期以前的不允許點(diǎn)擊 時間戳長度是 10 位	0	否
futureDayHide	某個日期以后的不允許點(diǎn)擊 時間戳長度是 10 位	很大	否
sundayStart	默認(rèn)是周一開始 當(dāng)是true的時候 是周日開始	false	否
textTop	日歷頭部的文字，默認(rèn)是 [ '日','一', '二', '三', '四', '五', '六'] ，可以根據(jù)自己的需求進(jìn)行不同的修改。	---	否

? 在 Calendar標(biāo)簽上添加 ref 屬性, 暴露出三個方法可以 直接切換月份 例如: <Calendar ref="Calendar"></Calendar>? this.$refs.Calendar.PreMonth(); //調(diào)用方法實現(xiàn)轉(zhuǎn)到上個月? this.$refs.Calendar.NextMonth(); //調(diào)用方法實現(xiàn)轉(zhuǎn)到下個月? this.$refs.Calendar.ChoseMonth('2018-12-12'); //調(diào)用方法實現(xiàn)轉(zhuǎn)到某個月? this.$refs.Calendar.ChoseMonth('2018-12-12',false); //跳轉(zhuǎn)到18年12月12日 但是不選中當(dāng)天//第二個參數(shù) false表示不選中日期 。

總結(jié)

以上是生活随笔為你收集整理的vue日历插件vue-calendar的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。