使用Vue写一个datepicker的示例 - 行业资讯 - 肥雀云

前言
　　

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

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

GitHub地址:
　　

功能,期望
　　

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

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

目录结构
　　

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

　　　　　　。　　├──Datepicker.vue 　　├──许可证　　├──README.md 　　├──dist 　　│└──vue-datepicker.js 　　├──index.js 　　├──package.json 　　└──webpack.config.js 　　之前　　　　

从Datepicker。vue入手
　　

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

　　　　　　& lt; template> 　　& lt; div类="日期选择"比; 　　& lt; div类="输入" v-text=凹壑怠盄click=皃anelState=! panelState”比; 　　& lt;/div> 　　& lt; div类=" date-panel " v-show=皃anelState”比; 　　& lt;/div> 　　& lt;/template> 　　　　& lt; scrip> 　　出口默认{ 　　数据(){ 　　返回{ 　　panelState:假//初始值,默认面板关闭　　} 　　}, 　　道具:{ 　　值:字符串　　} 　　} 　　& lt;/script> 　　　　之前　　　　

渲染日期列表
　　

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

　　　　　　计算:{ 　　dateList () {//获取当月的天数　　(这让currentMonthLength=新的日期。tmpMonth,这。tmpMonth + 1,0) .getDate ()//先将当月的日期塞入dateList 　　让dateList=Array.from({长度:currentMonthLength}, (val,索引)=比;{ 　　返回{ 　　currentMonth:没错, 　　索引值:+ 1 　　} 　　})//获取当月1号的星期是为了确定在1号前需要插多少天　　(这让startDay=新的日期。年,这个。tmpMonth, 1) .getDay ()//确认上个月一共多少天　　(这让previousMongthLength=新的日期。年,这个。tmpMonth,0) .getDate () 　　}//在1号前插入上个月日期　　(让我=0,len=startDay;我& lt;兰;我+ +){ 　　dateList=[{previousMonth:真的,价值:previousMongthLength——我}].concat (dateList) 　　}//补全剩余位置　　(让我=0=1项;我& lt;42岁;我+ +项目+ +){ 　　dateList [dateList。长度]={nextMonth:真的,价值:我} 　　} 　　返回dateList 　　} 　　之前　　　　

这里用Array.from来初始化了一个数组,传入一个数组,转化成数组,在拼接字符串时候采用了arr [arr.length]和[{}].concat (arr)这种方式,因为在JsTips上学到这样做性能更好,文章的最后会贴出相关链接。