uniapp日历组件
自己写的日历组件,欢迎指正
<template>
<view class="fu-calendar-wrap">
<!-- 日历选择 start -->
<view class="fu-calendar-data fu-flex fu-justify-center fu-align-center fu-margin fu-height-72" v-if="changeTitle">
<block v-if="changeYear">
<view class="fu-arrow fu-left fu-flex fu-justify-between fu-align-center" @click="prevYear">
<text class="iconfont icon-changyongicon-" :style="[yaColor]"></text>
</view>
</block>
<block v-if="changeMonth">
<view class="fu-arrow single fu-left fu-flex fu-justify-between fu-align-center" @click="prevMonth">
<text class="iconfont icon-jiantouyou" :style="[maColor]"></text>
</view>
</block>
<view class="fu-title fu-text-32 fu-text-333">{
{
currentDate[0] }}年{
{
currentDate[1] }}月</view>
<block v-if="changeMonth">
<view class="fu-arrow single fu-right fu-flex fu-justify-between fu-align-center" @click="nextMonth">
<text class="iconfont icon-jiantouyou" :style="[maColor]"></text>
</view>
</block>
<block v-if="changeYear">
<view class="fu-arrow fu-flex fu-right fu-justify-between fu-align-center" @click="nextYear">
<text class="iconfont icon-changyongicon-" :style="[yaColor]"></text>
</view>
</block>
</view>
<!-- 日历选择 end -->
<!-- 星期 start -->
<view class="fu-week fu-flex fu-justify-between fu-align-center fu-text-333 fu-height-72">
<view class="fu-week-item fu-text-center" v-for="item in weekData" :key="item">{
{
item }}</view>
</view>
<!-- 星期 end -->
<!-- 日历 start -->
<view class="fu-calendar fu-flex fu-justify-between fu-align-center fu-flex-wrap fu-text-333">
<!-- mode == date || mode == range -->
<view
class="fu-calendar-item fu-text-center"
@click="changeCalendar(item, index)"
:class="{ isNot: item.isNot, isFuture: item.isFuture && !item.isNot }"
v-for="(item, index) in calendar"
:key="index"
>
<view
class="fu-calendar-num fu-flex fu-justify-center fu-align-center"
:class="{ signin: mode == 'signin', range: mode == 'range', start: item.start, end: item.end }"
:style="[(item.dayActive || item.start || item.end) && !item.isNot ? dayBg : {}, item.active && !item.isNot ? activeBg : {}]"
>
{
{
item.day }}
<view class="fu-calendar-text" v-show="item.start">{
{
startText }}</view>
<view class="fu-calendar-text" v-show="item.end">{
{
endText }}</view>
</view>
</view>
</view>
<!-- 日历 end -->
</view>
</template>
<script>
/**
* @author 邓东方
*/
export default {
props: {
// 月份切换按钮箭头颜色
'month-arrow-color':{
type: String,
default: '#666666'
},
// 年份切换按钮箭头颜色
'year-arrow-color':{
type: String,
default: '#999999'
},
// 是否显示顶部年月
'change-title': {
type: Boolean,
default: true
},
// 是否显示顶部的切换年份方向的按钮
'change-year': {
type: Boolean,
default: true
},
// 是否显示顶部的切换月份方向的按钮
'change-month': {
type: Boolean,
default: true
},
// 日期模式 date 单个日期选择模式 range 日期段选择模式 signin 签到日期展示模式
mode: {
type: String,
default: 'date'
},
// 未来日期是否可选择 默认不可选择
future: {
type: Boolean,
default: false
},
// 日期段回显时 若只传入一个日期则不显示
//日期段选择时默认显示开始时间
'start-time': {
type: String,
default: ''
},
//日期段选择时默认显示结束时间
'end-time': {
type: String,
default: ''
},
// 起始日期底部的提示文字
'start-text': {
type: String,
default: '开始'
},
// 结束日期底部的提示文字
'end-text': {
type: String,
default: '结束'
},
// 选择日期开始结束当天背景色
'active-bg-color': {
type: String,
default: 'rgba(41,121,255,1)'
},
// 选择日期中间的背景色
'range-bg-color': {
type: String,
default: 'rgba(41,121,255,0.13)'
},
// 当前日期是否高亮
isDefaultDay: {
type: Boolean,
default: true
},
// 单个日期选择默认选中时间 xxxx-yy-dd
currenTime: {
type: String,
default: ''
},
// 签到模式数据 [xxxx-yy-dd]
signinData: {
type: Array,
default: function() {
return [];
}
}
},
data() {
return {
weekData: ['日', '一', '二', '三', '四', '五', '六'], //星期
calendar: [], //日历数组
currentDate: [], //当前日期
currentDay: '', //当天时间
start: '', //开始时间
end: '', //结束时间
isEmit: true //mode == range是否推送
};
},
computed: {
// 背景色
dayBg() {
return {
background: this.activeBgColor,