这篇文章主要为大家详细介绍了vue左右滑动选择日期组件封装的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
现在做的项目中遇到了左右滑动选择日期的一个功能，然后我封装了一下这个组件，现在分享给大家看一下：
效果图：
1、安装dayjs日期文件
npm install dayjs --save
2、封装的组件：
{{item}}{{day.value}}
相关的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、使用到的页面
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持0133技术站。
以上就是vue左右滑动选择日期组件封装的方法的详细内容，更多请关注0133技术站其它相关文章！
