vue日历 ---- heidou-calendar

npm地址：heidou-calendar

下载：
npm install --save heidou-calendar

全局引入：

vue引入
import Vue from 'vue'
引入日历组件
import HeidouCalendar from 'heidou-calendar'
引入日历样式
import 'heidou-calendar/heidou-calendar.css'
挂载到vue上
Vue.use(HeidouCalendar)

页面中使用

	<HeidouCalendar style="width: 450px; height: 350px"> 
		<template v-slot:mkCalendarHeaderSlot> 测试title </template> 
	</HeidouCalendar>

Slot.

参数	说明	类型	可选值	默认值
mkCalendarHeaderSlot	日历的头部描述	String	-	-

Attributes

参数	说明	类型	可选值	默认值
isOtherDate	是否展示上月月底 下月月初	Boolean	true / false	false
hideTitle	是否展示title	Boolean	true / false	true
multiSelect	是否开启摁下鼠标进行多选	Boolean	true / false	false
SelectedBackgroundColor	选中的背景色	String	-	#409eff
SelectedTextColor	选中的文字色	String	-	#ffffff
isMonday	是否从周一在开头	Boolean	true / false	true
selectType	单选/多选/范围选	Number	单选1，多选2，范围选3	1
selectList	选中数据的数组	Array	-	[]
isSwitch	需要切换按钮传入	Boolean	true / false	true
data	展示用户传进来的数据集合	Array	-	页面中的 this.currentMonthDays

说说使用过程吧，如果只是进行简单的日历展示的话，作者已经帮大家写好了demo可以放心使用，如果大家做的功能是类似于【考勤记录表】需要使用自定义数据进行文字在日历数字下边展示问题的话，可以通过在【data】( 具体格式在下边 ) 的每一项数据中携带【text】即可展示文字并且使用字段【distinguish】ps：默认为0， 正常的为1， 异常的为-1即可设置不同的class名称 通过D-yesText设置成功的样式， 通过D-noText设置失败的样式。

其中year代表年，month代表月，day代表日，checked代表是否选中，text代表要在日历日期下方插入的文字，distinguish用来区分成功、失败、默认 对应值分别为 1、-1、 0