少女风vue组件库的制作全过程

visibleDays () {
 let { year, month } = this.display
 let defaultObj = new Date(year, month, 28)
 var curMonthFirstDay = helper.getMonthFirstDay(defaultObj)
 var curMonthFirstDayDay = helper.getDay(curMonthFirstDay) === 0 ? 7 : helper.getDay(curMonthFirstDay)
 let x = curMonthFirstDayDay - 1 // 前面需要补多少位
 var arr = [] for (let i = 0; i < 42; i++) {
  arr.push(new Date(curMonthFirstDay.getTime() + (-x + i) * 3600 * 24 * 1000))
 }
 return arr
 },

3、props接受value, 类型是date

日期面板上的日期渲染的时候加上一个计算的class, 分别加上’today’,’selected-date’,’available’,’prev-month’,’next-month’，进行样式上的区分

4、实现选中日期

告诉父组件修改数据意图让父组件修改传入的props，对应使用我们组件的时候使用, 这里的基础知识是组件上的v-model是个语法糖，v-model=”x”会被解析成:value=”a” @input=”a=$event”。同时面板上输入框显示的数据也要跟着变化，所以这里用计算属性，如在computed中用formattedValue表示。

 formattedValue: {
  return this.value instanceof Date ? helper.getFormatDate(this.value) : ''
 }

5、实现点击上一年/月，下一年/月

我们需要知道当前展示的是哪一年哪一个月，这个数据是组件内部维护的，所以在data申明一个display对象

display: {
  year: (this.value && this.value.getFullYear()) || new Date().getFullYear(),
  month: (this.value && this.value.getMonth()) || new Date().getMonth()
 }

点击的时候即修改display对象的year/month，因为visibleDays也是计算属性，依赖display对象，所以点击上一年/月，下一年/月，渲染的日期也跟着变。

6、实现选择年

年面板的制作，生成12个年，点击第1（12）个年渲染出上（下）12个年。这里只需要给渲染出来的年的第一个和最后一个dom元素绑定事件，事件监听程序传入当前点击的元素的值，即可计算出上或下一个12年。
同理点击年的时候用$emit通知父组件修改value

7、实现选择月

直接写死12个月份，同理点击月的时候用$emit通知父组件修改value

8、增加住面板上【今天】和【清空】的按钮

点击的时候用$emit通知父组件修改value，new Date()和”

9、细节处理

用户选中完日期后要关闭面板

用户选了年后点击周围空白区域日期面板关闭，第二次点击进来应该默认展示日面板

10、用户可以修改输入框里面的值，需要判断有效性

有效的话$emit通知父组件改值，无效的话当失去焦点的时候变回原来的值，这里需要用原生js去给input修改value。注意这里直接改formattedValue的话无效，虽然输入框的值绑定了:value=”formattedValue”,但是因为formattedValue是计算属性，依赖于this.value，在用户输入无效值的情况下this.value不会改变，因此界面不会被更新，所以需要手动改value的值。