vue左右滑动选择日期组件封装的方法

现在做的项目中遇到了左右滑动选择日期的一个功能，然后我封装了一下这个组件，现在分享给大家看一下：

效果图：

1、安装dayjs日期文件

npm install dayjs --save

2、封装的组件：

相关的style.css文件

.m-calendar {
  background: #fff;
  box-shadow: 0px 2px 6px 0px rgba(183, 183, 183, 0.2);
}
.m-calendar .m-toolbar {
  padding-bottom: 0.36266667rem;
}
.m-calendar .m-toolbar {
  display: flex;
  height: 2.56rem;
}
.m-calendar .m-toolbar .m-month-selector,
.m-calendar .m-toolbar .m-year-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.74666667rem;
}
.m-calendar .m-toolbar .m-month-selector,
.m-calendar .m-toolbar .m-year-selector {
  line-height: 1.06666667rem;
}
.m-calendar .m-toolbar .m-month-selector,
.m-calendar .m-toolbar .m-year-selector {
  font-size: 0.768rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: #29262a;
}
.m-calendar .m-toolbar .m-year-selector {
  padding-left: 0.91733333rem;
}
.m-calendar .m-week-header {
  padding: 0 0.91733333rem;
}
.m-calendar .m-week-header {
  padding-bottom: 0.512rem;
}
.m-calendar .m-week-header {
  position: relative;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  font-size: 0.59733333rem;
}
.m-calendar .m-week-header .m-week-day {
  text-align: left;
  line-height: 0.85333333rem;
  font-family: PingFangSC-Regular, PingFangSC;
  font-weight: 400;
  color: #222222;
}
.m-calendar .m-months-container {
  position: relative;
  box-sizing: border-box;
  height: 12.37333333rem;
  overflow: hidden;
}
.m-calendar .m-months-container .m-months-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.m-calendar .m-months-container .m-months-wrapper .m-months {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
  width: 16rem;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row {
  padding-top: 0.512rem;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row {
  width: 16rem;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row {
  position: relative;
  display: flex;
  height: 1.408rem;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day {
  margin-right: 0.87466667rem;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day:nth-child(1) {
  margin-left: 0.66133333rem;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day {
  font-size: 0.59733333rem;
  font-family: PingFangSC-Medium, PingFangSC;
  font-weight: 500;
  color: #222222;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day {
  position: relative;
  height: 1.408rem;
  width: 1.408rem;
  line-height: 1.408rem;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 50%;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-day-num {
  width: 1.408rem;
  display: inline-block;
  border-radius: 100%;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-day-num {
  height: 1.408rem;
  line-height: 1.408rem;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-grey {
  color: #b8b8b8;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-today {
  background: #5DABF3;
  color: #fff;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-disable {
  color: #b8b8b8;
  text-decoration: line-through;
}
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-select {
  background: #007aff;
  color: #fff;
}

3、使用到的页面

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。