Vue 必备小知识-日期选择组件的二次封装

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文学习了 Vue 组件化开发之: 基于 iviewUI 组件库的封装(一)

---> 对抽屉组件进行二次封装, 定制符合项目开发的组件.

工作项目开发中都在使用一些框架库, 但是并不是所有组件都会适合我们的业务/UI, 所以有时候就需要我们对组件库的组件进行二次封装, 以满足项目开发需求

日期选择组件的二次封装

开发现在可能每个人都有写自己的组件, 对于公共组件的封装, 可以有一些标记, 比方说某个人以一个字母开头 a-date/ b-bread/ c-tree等等, 就知道是谁写的, 如果根据文档使用还有问题, 可快速找到对应的开发人员.

比方说以我们的名字特定拼音首字母, 能快速看懂是谁开发的也可以.

日期选择组件的 template:

<template>
<div class="x-date"
       v-click-outside>
    <input type="text"
           :value="formatDate">
    <div class="pannel"
         v-if="isVisible">
      <div class="pannel-nav">
        <span @click="prevYear">&lt;</span>
        <span @click="prevMonth">&lt;&lt;</span>
        <span>{{time.year}}年</span>
        <span>{{time.month + 1}}月</span>
        <span @click="nextMonth">&gt;&gt;</span>
        <span @click="nextYear">&gt;</span>
      </div>
      <div class="pannel-content">
        <div class="week">
          <span class="cell"
                v-for="week in weekDays"
                :key="week">
            {{ week }}
          </span>
        </div>
        <div class="days">
          <!-- 这里循环列出一个 6 * 7 列表 -->
          <div v-for="i in 6"
               :key="i">
            <!-- 判断是并不是本月 如不是 变灰 -->
            <span class="cell cell-days"
                  @click="chooseDate(visibleDays[(i-1)*7+(j-1)])"
                  :class="[
                    {notCurrentMonth: !isCurrentMonth(visibleDays[(i-1)*7+(j-1)])},
                    {today: isToday(visibleDays[(i-1)*7+(j-1)])},
                    {select: isSelect(visibleDays[(i-1)*7+(j-1)])}
                  ]"
                  v-for="j in 7">
              {{ visibleDays[(i-1) * 7 + (j - 1)].getDate() }}
            </span>
          </div>
        </div>
      </div>
      <div class="pannel-footer">
        昨天 - 今天 - 明天
      </div>
    </div>
  </div>
</template>

获取日期时间方法封装:

// src/utils/date-helper.js
function getFullYear(date) {
  return date.getFullYear()
}
const getYearMonthDay = (date) => {
  let year = date.getFullYear()
  let month = date.getMonth()
  let day = date.getDate()
  return { year, month, day }
}
const getDate = (year, month, day) => {
  return new Date(year, month, day)
}

// 导出工具函数
export { getFullYear, getYearMonthDay, getDate }