使用Vue写一个datepicker的示例

2023-09-17 05:52:05 58

前言

写插件是很有意思，也很锻炼人，因为这个过程中能发现许多的细节问题。在前端发展的过程中，jQuery无疑是一个重要的里程碑，围绕着这个优秀项目也出现了很多优秀的插件可以直接使用，大大节省了开发者们的时间。jQuery最重要的作用是跨浏览器，而现在浏览器市场虽不完美，但已远没有从前那么惨，数据驱动视图的思想倍受欢迎，大家开始使用前端框架取代jQuery，我个人比较喜欢Vue.js，所以想试着用Vue.js写一个组件出来。

为了发布到npm上，所以给项目地址改名字了，但是内部代码没有改，使用方法比之前方便。

GitHub地址:Here

功能&期望

这个datepicker目前仅实现了一些常用的功能：

选择时间(这话说得有点多余)
最大/最小时间限制
中/英文切换(其实也就星期和月份需要切换)
可以以.vue形式使用，也可在浏览器环境中直接使用
没了。。。

目录结构

万事的第一步依然是创建项目，只是单一组件，结构并不复杂，Datepicker.vue是最重要的组件文件，dist是webpack的输出文件夹，index.js是webpack打包的入口文件，最后是webpack的配置文件，用来对我们的库文件进行打包用的。因此项目结构就是这样：

.
├──Datepicker.vue
├──LICENSE
├──README.md
├──dist
│└──vue-datepicker.js
├──index.js
├──package.json
└──webpack.config.js

从Datepicker.vue入手

以.vue的方式写Vue组件是一种特殊写法，每个Vue文件包括template,script,style三部分，template最好不要成为片段实例,所以最外层先套一层div，当做整个组件的根元素。一个datepicker一般由两部分组成，一个用来显示日期的input框，一个用来选择日期的panel，因为我发现input在移动端会自动唤起键盘，所以没有使用input，直接用了div模拟,通过点击事件决定panel的显隐。value是最终的结果，需要和父组件通信，所以将value写成了prop，在父组件中使用value.sync="xxx"，datepicker的value就和父组件的xxx双向绑定了。




exportdefault{
data(){
return{
panelState:false//初始值，默认panel关闭
}
},
props:{
value:String
}
}

渲染日期列表

一个月最少是28天，如果把周日排在开头，那么最少(1号恰好是周日)需要4行，但是每个月天数30，31居多，而且1号又不一定是周日，我索性干脆按最多的情况设计了，共6行，当月日期没填满的地方用上个月或下个月的日期补齐，这样就方便计算了，而且切换月份时候panel高度不会变化。日期列表的数组需要动态计算，Vue提供了computed这个属性，所以直接将日期列表dateList写成计算属性。我的方法是将日期列表固定为长度为42的数组，然后将本月，上个月，下个月的日期依次填充。

computed:{
dateList(){
//获取当月的天数
letcurrentMonthLength=newDate(this.tmpMonth,this.tmpMonth+1,0).getDate()
//先将当月的日期塞入dateList
letdateList=Array.from({length:currentMonthLength},(val,index)=>{
return{
currentMonth:true,
value:index+1
}
})
//获取当月1号的星期是为了确定在1号前需要插多少天
letstartDay=newDate(this.year,this.tmpMonth,1).getDay()
//确认上个月一共多少天
letpreviousMongthLength=newDate(this.year,this.tmpMonth,0).getDate()
}
//在1号前插入上个月日期
for(leti=0,len=startDay;i
这里用Array.from来初始化了一个数组，传入一个ArrayLike，转化成数组，在拼接字符串时候采用了arr[arr.length]和[{}].concat(arr)这种方式，因为在JsTips上学到这样做性能更好，文章的最后会贴出相关链接。

这样，日期列表就构建好了，在template中使用v-for循环渲染出来





样式上就可以自己发挥了，怎么喜欢怎么写。需要注意的是循环日期可能会出现上个月或这个月的日期，我通过previuosMonth,currentMonth和nextMonth分别做了标记，对其他功能提供判断条件。

年份和月份的列表都是差不多的道理，年份列表的初始值我直接写在了data里，以当前年份为第一个，为了和月份保持一致，每次显示12个，都通过v-for渲染。
data(){
return{
yearList:Array.from({length:12},(value,index)=>newDate().getFullYear()+index)
}
}

选择日期功能


选择顺序是：年->月->日，所以我们可以通过一个状态变量来控制panel中显示的内容，绑定适合的函数切换显示状态。

选择日期的方法就不细说了，在selectYear,selectMonth中对年份，月份变量赋值，再分别将panelType推向下一步就实现了日期选择功能。

不过在未选择完日期之前，你可能不希望当前年月的真实值发生变化，所以在这些方法中可先将选择的值赋给一个临时变量，等到seletDate的时候再一次性全部赋值。

最大/小时间限制

最大/小值是需要从父组件传递下来的，因此应该使用props，另外，这个值可以是字符串，也应该可以是变量(比如同时存在两个datepicker，第二个的日期不能比第一个大这种逻辑)，所以应该使用Dynamicallybind的方式传值。

增加了限制条件，对于不合法的日期，其按钮应该变为置灰状态，我用了比较时间戳的方式来判断日期是否合法，因为就算当前panel中的日期是跨年或是跨月的，通过日期构造函数创建时都会帮你转换成对应的合法值，省去很多判断的麻烦：

动态计算位置

当页面右侧有足够的空间显示时，datepicker的panel会定位为相对于父元素left:0的位置，如果没有足够的空间，则应该置于right:0的位置，这一点可以通过Vue提供的动态样式和样式对象来实现(动态class和动态style其实只是动态props的特例)，而计算位置的时刻，我放在了组件声明周期的ready周期中，因为这时组件已经插入到DOM树中，可以获取style进行动态计算：

使用Vue写一个datepicker的示例

前言

功能&期望

目录结构

从Datepicker.vue入手

渲染日期列表

选择日期功能

最大/小时间限制

动态计算位置

中英文切换

多种使用方式

适配Vue2.x

filter

移除$index和$key

ready生命周期移除

prop.sync弃用

总结

随机推荐

使用Vue写一个datepicker的示例

前言

功能&期望

目录结构

从Datepicker.vue入手

渲染日期列表

选择日期功能

最大/小时间限制

动态计算位置

中英文切换

多种使用方式

适配Vue2.x

filter

移除$index和$key

ready生命周期移除

prop.sync弃用

总结

热门推荐

随机推荐