從零實現Vue的元件庫（十一）- Date-picker 實現

Yzz發表於2019-01-24

用於選擇日期

Date-picer 元件的難點在於：

獲取年月日，相關日期的邏輯以及 new Date 的 Api 使用；
結合Functional Component，減少切換日期時 render 的代價；
元件功能解耦。

1. 例項

程式碼

<!-- 基礎用法 -->
<fat-date-picker v-model="date" />
<!-- 語言為EN -->
<fat-date-picker lang="EN" v-model="secDate" />
複製程式碼

例項地址：DatePicker 例項

程式碼地址：Github UI-Library

2. 原理

基本結構如下

<template>
  <div class="date-picker-wrapper" ref="date-picker">
    <fat-input
      type="text"
      readonly
      :class="['picker-data', 'not-select', {'disabled': disabled}]"
      :value="selectValue | dateFormat('day', lang)"
      :placeholder="placeholder"
      @click="toggle"
    />
    <transition name="fade">
      <div class="picker-panel" v-show="UI.isOpen">
        <!-- 顯示日期 -->
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    value: { type: [Date, String, Number] },
    ...
  },
  filters: {
    dateFormat(val, mode, lang) {
      // 用於 format 對應日期
    }
  },
  model: {
    prop: "value",
    event: "input"
  },
  data() {
    return {
      date: {
        year: null,
        month: null,
        day: null
      },
      UI: {
        isOpen: false
      },
      selectValue: null,
      panelType: "day"
    };
  },
  computed: {
    ...
  },
  watch: {
    ...
    value: {
      handler(newValue) {
        this.date = dateToObj(newValue ? new Date(newValue) : new Date());
        this.selectValue = newValue ? new Date(newValue) : "";
      },
      immediate: true
    }
  },
  methods: {
    ...
    toggle() {
      this.UI.isOpen = !this.UI.isOpen;
      if (this.UI.isOpen) {
        const datePicker = this.$refs["date-picker"];
        const handler = event => {
          let dom = event.target;
          let flag = false;

          while (dom) {
            if (dom === datePicker) {
              flag = true;
              break;
            }
            dom = dom.parentNode;
          }
          if (!flag) this.UI.isOpen = flag;
          document.removeEventListener("click", handler, true);
        };
        document.addEventListener("click", handler, true);
      }
    }
  }
};
</script>
複製程式碼

首先處理 Date-picker 的資料雙向繫結以及下拉框的展開與收縮：

資料繫結，與之前 Select 元件一直，需要定義 v-model 的相關 prop 以及 event，通過watch prop的變化，具體邏輯如下

value: {
  handler(newValue) {
      // 從 new Date() 中分離出當前的年月日，方便生成對應的年Table、月Table、日Table
      this.date = dateToObj(newValue ? new Date(newValue) : new Date());
      this.selectValue = newValue ? new Date(newValue) : "";
  },
  immediate: true
}
export const dateToObj = function (date) {
  return {
      year: date.getFullYear(),
      month: date.getMonth(),
      day: date.getDate()
  }
}
複製程式碼

下拉框的展開和收縮，與之前 Select 元件不同的是，由於 Date-picker 的下拉框存在著多種狀態，而且後續提供輸入功能，所以 tabIndex 為 div 新增 blur 事件的方案實現起來較為複雜，所以採用比較常規的做法

toggle() {
    this.UI.isOpen = !this.UI.isOpen;
    if (this.UI.isOpen) {
        const datePicker = this.$refs["date-picker"];
        const handler = event => {
            let dom = event.target;
            let flag = false;

        while (dom) {
            if (dom === datePicker) {
                flag = true;
                break;
            }
            dom = dom.parentNode;
        }
        if (!flag) this.UI.isOpen = flag;
        document.removeEventListener("click", handler, true);
    };
    document.addEventListener("click", handler, true);
  }
}
複製程式碼

當下拉框展開的時候，監聽 document 的 click 事件，同時定義事件傳播模式為 use capture，此時遍歷 Dom，判斷是否在 event.target 是否為 Date-picker元件。

在處理資料的時候獲取到了當前的年、月、日，也就是 data 中的 date 物件

date: {
    year: null,
    month: null,
    day: null
}
複製程式碼

利用該物件來生成相應的下拉框的資料：

年：date.year 來生成年份的資料，也就是當前年份--到--當前年份+12；

yearList() {
    const {
        date: { year }
    } = this;
    return Array.from({ length: 12 }, (v = year, i) => ({
        type: "year",
        value: v + i
    })
  );
}
複製程式碼

月：區分中英文，當前路徑下維護了一份 CONST.json 用於防止靜態的中英文月份；
```
monthList() {
    const { lang } = this;
    return CONST[lang].month;
}
複製程式碼
```

日：這一部分比較複雜，首先實現當前月份的總天數，之後依據本月一天的星期數以及下個月第一天的星期數來填充表格，如圖

dayList() {
  const {
    date: { year, month },
    selectValue
  } = this;
  // 後去當前月份的天數
  let curMonthDays = new Date(year, month + 1, 0).getDate();
  // 第一天的星期數
  let firstDay = new Date(year, month, 1).getDay();
  // 下個月第一天的星期數
  let preMonthDays = new Date(year, month, 0).getDate();
  let days = Array.from(
    {
      length: curMonthDays
    },
    (val, index) => {
      let value = index + 1;
      let date = {
        year,
        month,
        day: value
      };
      // 選中日期高亮
      let type = isEqualDay(date, new Date(selectValue))
        ? "cur-month is-selected"
        : "cur-month";
      return {
        type,
        value
      };
    }
  );
  // 標識上一月以及下一個月，對應做樣式處理
  for (let index = 0; index < firstDay; index++) {
    days = [
      {
        type: "pre-month",
        value: preMonthDays--
      }
    ].concat(days);
  }
  for (let index = days.length, item = 1; index < 42; index++, item++) {
    days.push({
      type: "next-month",
      value: item
    });
  }
  return CONST[lang].day.concat(days);
}
複製程式碼

下拉框主要分為兩部分：操作欄、日期選擇框

操作欄

<div class="picker-panel" v-show="UI.isOpen">
    <div class="panel-header">
        <div class="left-part">
            <fat-icon
                class="panel-header-btn"
                name="chevron_left"
                :size="20"
                @click.stop="handleClick('decYear')"
            />
            <fat-icon
                class="panel-header-btn"
                name="chevron_left"
                :size="20"
                @click.stop="handleClick('decMonth')"
            />
        </div>
        ...
        <div>
            <fat-icon
                class="panel-header-btn"
                name="chevron_right"
                :size="20"
                @click.stop="handleClick('addMonth')"
            />
            <fat-icon
                class="panel-header-btn"
                name="chevron_right"
                :size="20"
                @click.stop="handleClick('addYear')"
            />
        </div>
    </div>
 </div>
複製程式碼

四個 icon 主要負責加減月份以及年份，由於四個都屬於點選事件，並且只修改了 data，利用介面卡模式來處理

handleClick(type) {
    const handlers = {
        addYear: () => ++this.date.year,
        decYear: () => --this.date.year,
        addMonth: () => ++this.date.month,
        decMonth: () => --this.date.month,
        year: () => (this.panelType = "year"),
        month: () => (this.panelType = "month")
    };
    handlers[type]();
}
複製程式碼

同時 watch 狀態 date ，完成相關年月的進位

date: {
    handler(newValue) {
        let { month } = newValue;
        if (month > 11) {
            ++this.date.year;
            this.date.month = 0;
        } else if (month < 0) {
            --this.date.year;
            this.date.month = 11;
        } else {
            this.date.month = newValue.month;
        }
    },
    deep: true
},
複製程式碼

日期選擇框：這部分要實時變動，為了省去模板解析的耗費，採用 Functional Component 來實現，也就是說這一部分是函式式元件。

<date-panel
    class="panel-content"
    :type="panelType"
    :data="list"
    @select="panelClick"
/>
複製程式碼

其 props 包含上述年、月、日的資料，同樣也採用介面卡模式，依據 panelType 來區分展示的是那一部分資料

import GeneratorRows from './basic'

export default Vue.component('panel', {
    functional: true,
    render: function (_h, context) {
        // 獲取panel元件的props，包含資料data以及型別type
        const {
            data: list,
            type
        } = context.props
        let result = null
        // 如果展示的日，一行的數量為7個，如果是年月則展示3個。
        let num = type === 'day' ? 7 : 3
        // 此處利用事件委託
        const clickHandler = (e) => {
            if (e.target.attributes.index) {
                let value = e.target.attributes.index.value
                let params = {
                    type,
                    value
                }

                type === 'day' && Object.assign(params, {
                    dateType: e.target.attributes.dateType.value
                })
                context.listeners.select(params)
            }
            e.stopPropagation()
        }
        // GeneratorRows為自定義函式，用來生成對應的行
        result = _h('table', {
            attrs: {
                class: context.data.staticClass,
                cellspacing: 0,
                cellpadding: 0
            },
            on: {
                click: clickHandler
            }
        }, GeneratorRows(_h, type, list, num))
        return result
    }
})
複製程式碼

整體結構非常簡單，首先獲取該元件的 props ，從中得到資料和型別，

然後利用 GeneratorRows 函式去生成對應的 table，由於 table 內項比較多，所以利用事件委託技術，監聽 table 的 click 事件，

如果觸發的話，獲取 e.target 對應的屬性值 e.target.attributes.index.value，結合之前的型別，構建引數 params，再觸發自定義事件 context.listeners.select(params)。

export default function GeneratorRows(_h, type, list, itemNum) {
    let rows = []
    let row = []

    list.forEach((elem, index) => {
        let dom = index < itemNum ? 'th' : 'td'
        let className = index < itemNum && type === 'day' ? 'head-item' : `data-item ${elem.type}`
        let label = elem.label || elem.value

        row.push(
            _h(
                dom, {
                    attrs: {
                        class: className,
                        // 用於事件委託
                        dateType: elem.type,
                        index: elem.value,
                    }
                },
                label
            )
        )
        if (row.length % itemNum === 0 && row.length) {
            // 換行
            rows.push(
                _h(
                    'tr', {
                        attrs: {
                            class: "panel-content-row"
                        }
                    },
                    row
                )
            )
            row = []
        }
    })
    return rows
}
複製程式碼

GeneratorRows 函式就是遍歷上述 list ，然後依據規則生成對應 table。

3. 總結

這個元件原始的邏輯比較複雜，通過元件化的拆分以及資料的整合，使得整體的邏輯比較明瞭，也是我寫這套元件庫的原因。

往期文章：

原創宣告：該文章為原創文章，轉載請註明出處。

從零實現Vue的元件庫（十六）- Dropdown 實現
2019-04-01
Vue元件
從零實現Vue的元件庫（九）- InputNumber 實現
2019-01-04
Vue元件
從零實現Vue的元件庫（二）- Slider 實現
2018-12-20
Vue元件IDE
從零實現Vue的元件庫（一）- Toast 實現
2018-12-02
Vue元件AST
從零實現Vue的元件庫（十二）- Table 實現
2019-01-25
Vue元件
從零實現Vue的元件庫（十四）- RadioGroup 實現
2019-02-05
Vue元件
從零實現Vue的元件庫（十三）- Pagination 實現
2019-02-01
Vue元件
從零實現Vue的元件庫（十）- Select 實現
2019-03-03
Vue元件
從零實現Vue的元件庫（八）- Input 實現
2019-01-01
Vue元件
從零實現Vue的元件庫（五）- Breadcrumb 實現
2018-12-26
Vue元件
從零實現Vue的元件庫（十五）- Checkbox-Group 實現
2019-02-12
Vue元件
從零實現Vue的元件庫（七）- Message-Box 實現
2018-12-28
Vue元件
從零實現Vue的元件庫（六）- Hover-Tip 實現
2018-12-27
Vue元件
從零實現Vue的元件庫（四）- File-Reader實現
2018-12-25
Vue元件
從零實現Vue的元件庫（零）- 基本結構以及構建工具
2018-12-08
Vue元件
React從零實現-元件渲染和setState
2018-07-27
React元件
vue實現autoComplete元件
2018-04-29
Vue元件
實現一個vue元件庫釋出到npm
2022-03-30
Vue元件NPM
從零手寫實現 tomcat-03-基本的 socket 實現
2024-05-08
Tomcat
Vue3 企業級優雅實戰 - 元件庫框架 - 9 實現元件庫 cli - 上
2023-02-08
Vue元件框架
Vue3 企業級優雅實戰 - 元件庫框架 - 10 實現元件庫 cli - 下
2023-02-09
Vue元件框架
vue元件之輪播圖的實現
2019-03-21
Vue元件
從零實現一個Vue表單驗證外掛
2019-03-04
Vue
從零開始寫 Docker(十一)---實現 mydocker exec 進入容器內部
2024-04-16
Docker
從零到一實現類vue2.*的簡單MVVM框架
2019-02-02
VueMVVM框架
Vue元件實現函式防抖
2019-02-28
Vue元件函式
Vue實現函式防抖元件
2019-03-03
Vue函式元件
vue元件之路之輪播圖的實現
2019-03-21
Vue元件
從零實現一個 Webpack Plugin
2019-04-29
WebPlugin
從零實現DNN 探究梯度下降的原理
2019-06-06
DNN梯度
從零開始的Java RASP實現(二)
2021-08-17
Java
從零開始的Java RASP實現(一)
2021-07-30
Java
從零開始實現一個RPC框架（零）
2019-03-03
RPC框架
從零手寫實現 nginx-35-proxy_pass netty 如何實現？
2024-07-28
NginxNetty
從零手寫實現 nginx-03-nginx 基於 Netty 實現
2024-06-04
NginxNetty
純js實現 vue 元件與 vue 單檔案元件對比
2024-04-10
JSVue元件
React 怎麼實現 Vue 的 <keep-alive> 元件
2019-03-18
ReactVueKeep-Alive元件
從零開始用 proxy 實現 Mobx
2019-03-04

從零實現Vue的元件庫（十一）- Date-picker 實現

1. 例項

2. 原理

3. 總結

相關文章