font-style:normal;
padding:1px;
line-height: 14px;
height:14px;
}
.thing a {
cursor: pointer;
display: block;
width: 100%;
overflow: hidden;
word-break: break-all;
line-height: 16px;
height: 16px;
}
.thing{
margin-top: 3px;
}
.othermonth{
color: #dcafaf;
}
.istoday{
background: #06c7f3!important;
}
.ischecked{
background-color: #f17117!important;
}
</style>
2.子组件移动的组件（swiper_monthweek.vue）
<template>
<div class="calendarBox" ref="calendar" :class="{transition:transition}" :style="{height: calendarHeight == -100 ? 'calc(100% - 30px)':calendarHeight + 'px' }"
@touchstart.stop="moveStart"
@touchend.stop="moveEnd"
@touchmove.stop="move"
@mousedown.stop="moveStart_pc"
@mousemove.stop="move_pc"
@mouseup.stop="moveEnd_pc"
@mouseleave.stop="moveEnd_pc_1"
style="overflow:hidden;">
<div style="height: 100%;white-space: nowrap" :class="{transition:transition}" :style="{transform: 'translate3d('+calendarMove.x+'px,'+calendarMove.y+'px,0px)'}" >
<slot></slot>
</div>
</div>
</template>
<script>
export default{
data(){
return{
transition:false,//是否显示动画
calendarHeight:-100, //日历的高度
calendarMove:{
x:0,
y:0
},
move_start_x:0, //开始移动的位置x轴
move_start_y:0, //开始移动的位置y轴
move_mode:1, //移动方式,1左右移动,2上下移动
can_change_mode:true, //是否可以改变移动方式
move_start_calendarHeight:0, //开始移动的高度初始值
can_move:false, //是否触发move事件
itemWidth:0, //窗口的宽度
move_index:0, // 左右移动 1 向右移动-1向左移动
line_num:0, // 选中或今天是第几行的周
is_week:false, //是否是周历模式
}
},
props:['checkDate'],
created(){
// 初始化日历宽度和line_num
this.itemWidth = window.innerWidth
this.line_num = this.calc_line_num(this.checkDate)
},
watch:{
checkDate(val){
if(val){
this.line_num = this.calc_line_num(val)
console.log(this.line_num,'行')
}
}
},
methods:{
// PC端为了鼠标移出日历后不能触发mouseup事件而触发的事件
moveEnd_pc_1(e){
if(this.can_move){
this.moveEnd_pc(e)
}
},
// pc端开始移动
moveStart_pc(e){
if(!ISPC)return
this.moveStart(e)
},
// pc端移动
move_pc(e){
if(!ISPC)return
this.move(e)
},
// pc端结束移动
moveEnd_pc(e){
if(!ISPC)return
this.moveEnd(e)
},
// 手机端端开始移动
