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

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

文章图片

1、安装dayjs日期文件

npm install dayjs --save

2、封装的组件：

@import './style.css';

相关的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、使用到的页面