左右滑动的vue日历组件
安装左右滑动事件
- 这个需要先安装依赖
npm install vue-touch@next --save
- main.js中引入
import VueTouch from 'vue-touch' Vue.use(VueTouch, {name: 'v-touch'}) VueTouch.config.swipe = { threshold: 100 //手指左右滑动距离 }
- 使用
<v-touch @swipeleft="onSwipeLeft" @swiperight="onSwipeRight" tag="div"> (你的组件) </v-touch>
父组件内容
<template>
<div>
<HelloWorld
:arr="arr"
@handleTime="handleTimeFun"
@onSwipeLeft="onSwipeLeft"
@onSwipeRight="onSwipeRight"
/>
</div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
export default {
data() {
return {
year: "", //年
month: "", //月
days: [], //日期
arr: [],
};
},
created() {
this.handleShowToday();
},
components: { HelloWorld },
computed: {},
methods: {
handleTimeFun(row) {
console.log(row);
},
onSwipeLeft(row) {
this.handleShowToday(row);
},
onSwipeRight(row) {
this.handleShowToday(row);
},
//得到当前年这个月分有多少天
getDays(Y, M) {
return new Date(Y, M, 0).getDate();
},
/**
* 获取本月日期
*/
pushDays() {
//将这个月多少天加入数组days
for (let i = 1; i <= this.getDays(this.year, this.month); i++) {
const _day = i > 9 ? `${i}` : `0${i}`,
_month = this.month > 9 ? `${this.month}` : `0${this.month}`,
date = `${this.year}-${_month}-${_day}`;
this.days.push({
day: `${i}`,
isActive: false,
month: _month,
year: `${this.year}`,
date,
timestamp: new Date(date).getTime(), //转换时间戳
});
}
},
/**
* 当天
*/
handleShowToday(time = new Date()) {
let now = new Date(time);
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.dealDate();
},
dealDate() {
this.days = [];
this.pushDays();
let b = [
1, 2, 3, 4, 6, 7, 8, 9, 13, 12, 14, 15, 16, 18, 23, 24, 21, 25, 26, 28,
30, 31,
];
for (let i = 0; i < 7; i++) {
let random = Math.floor(Math.random() * b.length);
this.days.splice(random, 1);
}
this.arr = this.days;
},
},
};
</script>
<style scoped lang="less"></style>
子组件内容
<template>
<div class="container">
<div class="header_head">
<div class="head_item">
<van-icon name="arrow-left" @click="onSwipeRight" />
</div>
<div class="head_item_center">{{ year }}年{{ month }}月</div>
<div class="head_item">
<van-icon name="arrow" @click="onSwipeLeft" />
</div>
</div>
<div class="header_container">
<div class="item" v-for="item in weekList" :key="item">{{ item }}</div>
</div>
<div class="container_item">
<v-touch @swipeleft="onSwipeLeft" @swiperight="onSwipeRight" tag="div">
<ul class="container_day">
<li
v-for="item in days"
:class="{
isActive: item.isActive,
}"
:key="item.date"
@click="handleChooseTime(item)"
>
<div>
{{ item.day }}
</div>
<div v-for="v in arr" :key="v.date">
<div :class="{ color: v.date == item.date }"></div>
</div>
</li>
</ul>
</v-touch>
</div>
</div>
</template>
<script>
import { getCurDay } from "../utils/data";
export default {
props: {
arr: {
typeof: Array,
default: [],
},
},
data() {
return {
weekList: ["日,", "一", "二", "三", "四", "五", "六"],
year: "", //年
month: "", //月
days: [], //日期
};
},
mounted() {
this.handleShowToday();
},
methods: {
onSwipeLeft() {
this.handleShowNextMonth();
let date = this.year + "-" + this.month;
this.$emit("onSwipeLeft", date);
},
onSwipeRight() {
this.handleShowLastMonth();
let date = this.year + "-" + this.month;
this.$emit("onSwipeRight", date);
},
//得到当前年这个月分有多少天
getDays(Y, M) {
return new Date(Y, M, 0).getDate();
},
//得到当前年，这个月的一号是周几
getWeek(Y, M) {
let now = new Date();
now.setFullYear(this.year);
now.setMonth(this.month - 1);
now.setDate(1);
return now.getDay();
},
/**
* 获取本月日期
*/
pushDays() {
//将这个月多少天加入数组days
for (let i = 1; i <= this.getDays(this.year, this.month); i++) {
const _day = i > 9 ? `${i}` : `0${i}`,
_month = this.month > 9 ? `${this.month}` : `0${this.month}`,
date = `${this.year}-${_month}-${_day}`;
this.days.push({
day: `${i}`,
isActive: false,
month: _month,
year: `${this.year}`,
date,
timestamp: new Date(date).getTime(), //转换时间戳
});
}
//获取上个月的日期
this.getLastMonthDays();
},
/**
* 获取上个月的日期
*/
getLastMonthDays() {
const month = this.month > 1 ? this.month - 1 : this.year > 1970 ? 12 : 1,
year =
this.month > 1 ? this.year : this.year > 1970 ? this.year - 1 : 1970,
len = this.getWeek(this.year, this.month),
lastMonthDays = this.getDays(this.year, this.month - 1);
//将上个月要显示的天数加入days
for (let i = 0; i < len; i++) {
const _month = month > 9 ? `${month}` : `0${month}`,
date = `${year}-${_month}-${lastMonthDays - i}`;
this.days.unshift({
day: "",
month: "",
year: "",
isActive: false,
date,
timestamp: new Date(date).getTime(), //转换时间戳
});
}
},
/**
* 当天
*/ handleShowToday() {
let now = new Date();
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.dealDate();
},
/**
* 处理时间
*/
dealDate() {
this.days = [];
const curDate = getCurDay();
this.pushDays();
this.days.forEach((item) => {
if (item.date === curDate) {
this.$emit("handleTime", item);
item.isActive = true;
}
});
},
/**
* 下个月
*/
handleShowNextMonth() {
this.days = [];
if (this.month < 12) {
this.month = this.month + 1;
} else {
this.month = this.month = 1;
this.year = this.year + 1;
}
this.dealDate();
},
/**
* 上个月
*/
handleShowLastMonth() {
if (this.month > 1) {
this.month = this.month - 1;
} else if (this.year > 1970) {
this.month = 12;
this.year = this.year - 1;
}
this.dealDate();
},
/**
* 选择时间
* @param time
*/
handleChooseTime(time = {}) {
if (time.day != "") {
this.days.forEach((item) => {
if (item.timestamp === time.timestamp) {
item.isActive = true;
this.$emit("handleTime", item);
} else {
item.isActive = false;
}
});
}
},
},
};
</script>
<style scoped lang="less">
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
.header_head {
width: 100%;
height: 80px;
display: flex;
.head_item {
height: 100%;
width: 10%;
display: flex;
justify-content: center;
align-items: center;
}
.head_item_center {
height: 100%;
width: 10%;
flex: 1;
text-align: center;
line-height: 80px;
}
}
.header_container {
width: 100%;
height: 80px;
display: flex;
.item {
flex: 1;
text-align: center;
line-height: 80px;
}
}
}
.container_day {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
li {
cursor: pointer;
width: 14.28%;
height: 8vh;
font-size: 36px;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 20px;
box-sizing: border-box;
}
}
.isActive {
background: #409eff;
color: #f2f8fe;
border-radius: 10px;
}
.color {
width: 15px;
height: 15px;
background: red;
border-radius: 50%;
margin-top: 24px;
}
</style>
这个是那个 getCurDay 的内容，这个就是获取当天的方法
export function getCurDay() {
var datetime = new Date();
var year = datetime.getFullYear();
var month =
datetime.getMonth() + 1 < 10 ?
"0" + (datetime.getMonth() + 1) :
datetime.getMonth() + 1;
var date =
datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
return `${year}-${month}-${date}`;
}
我感觉虽然有点垃圾，不过还好，希望可以帮助到各位 哈哈哈
我感觉下面这两个都很不错
