項目實戰-在Vant的基礎上封裝下拉日期控件

需求分析

在實際項目中，表單裏面的日期選擇是經常使用的組件。Vant有提供日期組件，可是竟然沒有提供下拉形式的日期組件，不過該有的元件都有，就本身封裝一個。

封裝組件過程當中咱們要解決：

• 和表單的樣式能兼容
• 錯誤提示
• 參數問題
• 事件機制
• 格式化

解決問題

就給新的組件取名爲 VantFieldDate。
指望使用的時候是這樣的

<vant-field-date
  label="發佈時間"
  v-model="formData.publishDate"
  type="datetime"
  :max-date="new Date()"
/>

具體實現，我貼上代碼詳細講解。

<template>
  <div class="vant-field-date">
    <van-cell
      :title="label"
      :class="{'readonly': readonly, 'placeholder' : text}"
      :is-link="!readonly"
      :required="required"
      @click="show">
      <!-- 顯示當前值，沒有值顯示提示文字 -->
      {{ text ? text : placeholder }}
      <!-- 自定義錯誤顯示 -->
      <div
        v-if="$attrs.error"
        v-text="$attrs['error-message']"
        class="van-field__error-message"
      />
    </van-cell>
    <!-- 用 actionsheet 來包裹彈出層日期控件 -->
    <van-actionsheet v-model="isShowPicker">
      <!-- $attrs 能夠把根節點的attr放到目標組件上，如此能夠像使用 DatePicker 組件同樣使用這個新組件 -->
      <van-datetime-picker
        v-bind="$attrs"
        :type="type"
        title="請選擇日期"
        :min-date="minDate"
        :max-date="maxDate"
        @cancel="cancel"
        @confirm="confirm"
      />
    </van-actionsheet>
  </div>
</template>

<script>
  export default {
    name: 'VantFieldDate',
    inheritAttrs: false, // https://cn.vuejs.org/v2/api/#inheritAttrs
    props: {
      value: {
        type: [Number, Date],
        default: undefined // 值不能是 null，DatePicker會報錯
      },
      // Cell 顯示的文字
      label: {
        type: String,
        default: null
      },
      // 必填的星號
      required: {
        type: Boolean,
        default: false
      },
      // 只讀狀態
      readonly: {
        type: Boolean,
        default: false
      },
      // 佔位提示文字
      placeholder: {
        type: String,
        default: '請選擇'
      },
      // 展現的格式化
      format: {
        type: String,
        default: null
      }
    },
    data() {
      return {
        selectedItem: null,
        isShowPicker: false
      }
    },
    computed: {
      // 展現的格式化，時間提交的值是Date類型數據
      formatFormula() {
        if(this.format){
          return this.format
        } else if (this.type === 'date') {
          return 'yyyy-MM-dd'
        } else if (this.type === 'datetime') {
          return 'yyyy-MM-dd hh:mm'
        } else if (this.type === 'time') {
          return 'hh:mm'
        } else if (this.type === 'year-month') {
          return 'yyyy-MM'
        }
      },
      text() {
        return this.value ? this.dateFormat(this.value, this.formatFormula) : ''
      }
    },
    methods: {
      dateFormat: (value, format) => {
        if (!value) return
        if (!(value instanceof Date)) {
          value = new Date(value)
        }
        let o = {
          'M+': value.getMonth() + 1, // month
          'd+': value.getDate(), // day
          'h+': value.getHours(), // hour
          'm+': value.getMinutes(), // minute
          's+': value.getSeconds(), // second
          'q+': Math.floor((value.getMonth() + 3) / 3), // quarter
          'S': value.getMilliseconds() // millisecond
        }

        if (!format || format === '') {
          format = 'yyyy-MM-dd hh:mm:ss'
        }

        if (/(y+)/.test(format)) {
          format = format.replace(RegExp.$1, (value.getFullYear() + '').substr(4 - RegExp.$1.length))
        }

        for (let k in o) {
          if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length))
          }
        }
        return format
      },
      show() {
        if (!this.readonly) {
          this.isShowPicker = true
        }
      },
      confirm(value) {
        // 更新 v-model 綁定的 value 值，第二個參數是毫秒數，第三個參數是原始值，根據本身的項目的數據結構來修改
        // input 事件同時也會觸發 vee-validate 的驗證事件
        this.$emit('input', value.getTime(), value)
        // onChange事件，雖然重寫 @input能夠實現，但這樣會破壞 v-model 寫法。
        this.$emit('change', value.getTime(), value)
        this.cancel()
      },
      // 隱藏彈框
      cancel() {
        this.isShowPicker = false
      }
    }
  }
</script>

效果