封裝一個日期組件，提交數據爲字符串——dateStingPicker

dateStingPicker組件封裝

需求：

1. 頁面中使用日期選擇框，輸入框中回顯日期格式「XXXX年XX月XX日」
2. 提交數據時將日期格式轉換爲字符串，如：「20210314」
3. 查看時，回顯數據日期格式一樣爲「XXXX年XX月XX日」

演示實例

序——使用軟件及框架版本

1. vue 2.6.11
2. ant-design-vue 1.7.1
3. moment.js（日期轉換依賴）

設計思路

1. 根據需求，能夠知道須要回顯格式須要爲「XXXX年XX月XX日」，查看組件庫a-date-picker，瞭解到format屬性能夠將在輸入框中數據轉換爲特定格式。
2. 在提交數據時，因爲咱們是封裝組件，給其餘頁面中使用，因此須要將須要提交的值由子組件置到父組件上，因此在日期組件中選中日期出發的事件change/input，在選中日期的時候須要使用到$emit，將值置到上層副組件。
3. 在回顯數據時，查看頁面數據的時候，表單上顯示數據，此時從後臺數據中拿到的是字符串「20210314」，同時須要將數據格式化爲「XXXX年XX月XX日」，顯示在輸入框中。

具體代碼過程

1. template模板區域

<template>
  <div>
    <!--  這裏momVal是momentValue的縮寫，由於value的真實值是moment對象  -->
    <a-date-picker
      :value="momVal"
      :allowClear="allowClear"
      :disabled="disabled"
      :format="dateFormat"
      :mode="mode"
      :placeholder="placeholder"
      @change="dateChanged"
    >
    </a-date-picker>
  </div>
</template>

在這裏用到幾個屬性，

1. 因爲是封裝組件，因此使用value實現數據的雙向綁定，在表單中使用allClear的時候在點擊清除按鈕時也能夠清除表單顯示和底層數據。
2. mode是輸入框顯示模式，date、month、year可選，可是year模式時不太好用，具體能夠參考下一篇，year年份組件封裝。
3. 固然組件上不止有@change事件，@blur，@select都是可使用的，能夠根據項目需求來具體使用，不過在父組件上使用事件時，須要在子組件props 中聲明，並在模板部分使用雙向綁定:select="select"。

2. js區域

<script>
import moment from 'moment'

export default {
  name: 'dateStringPicker',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    // 返回的日期格式
    dateFormat: {
      type: String,
      default: 'YYYY年MM月DD日'
    },
    // 類型,選擇年份請傳入"year",選擇年月請傳入"month"
    mode: {
      type: String,
      default: 'date'
    },
    placeholder: {
      type: String,
      default: '請選擇日期'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    allowClear: {
      type: Boolean,
      default: true
    },
    // 判斷輸入的兩種狀態input/change
    triggerChange: {
      type: Boolean,
      default: true
    }
  },
  data () {
    const dateStr = this.value
    return {
      // 因爲vue是數據驅動頁面加載的，因此在data中須要給value一個初始值
      momVal: !dateStr ? null : moment(dateStr, this.dateFormat),
      lastValue: ''
    }
  },
  watch: {
    // 此處的監聽,用來實現設計思路3
    value (val) {
      if (!val) {
        this.momVal = null
      } else {
        this.momVal = moment(val, 'YYYYMMDD')
      }
    }
  },
  methods: {
    moment,
    // 此處change事件，用來實現設計思路2，此處有注意事項，當時寫的時候仍是遇到一些問題的
    dateChanged (mom) {
      // 參考注意事項3
      if (!mom) {
        if (this.triggerChange) {
          this.$emit('change', null)
        } else {
          this.$emit('input', null)
        }
      } else {
        // 參考注意事項1
        this.lastValue = moment(mom).format('YYYYMMDD')
        // 參考注意事項2
        if (this.triggerChange) {
          this.$emit('change', this.lastValue
        } else {
          this.$emit('input', this.lastValue)
        }
      }
    }
  }
}
</script>

注意事項：

1. 在提交數據的時候須要提交給表單的數據咱們經過lastValue傳遞；若是不須要格式轉換能夠直接使用this.momVal = value這樣傳遞的數據類型仍是moment對象。

2. 生造一個triggerChange屬性的緣由是，在ant-design-vue組件中，使用a-form表單組件的時候，分了兩種狀況

   • 提交數據時不須要校驗規則，使用v-model綁定數據
   • 提交數據時須要校驗規則，使用v-decorator

   在使用v-model時，點擊日期觸發的事件時input，而在使用v-decorator時，點擊日期觸發的事件時change

3. 爲何要在提交數據的change 事件中，添加一個!mom的條件判斷，緣由是：在表單上添加allClear屬性以後，表單中會出現能夠清除當前輸入框數據的符號「❌」，在清除表單數據的時候，表單上回顯示no valid或者NaN，緣由多是清除以後表單的初始值數據類型不對，這點我也不是太清楚。總之，解決方法就是添加一個!mom的條件判斷，在清除表單數據的時候從新給表單value賦一個空值null，由於value的類型是對象，因此不能是""。

測試demo實例

<template>
  <div>
    <div class="box">
      <h1>this is dateStringPiker</h1>
      <div class="btn">
        <a-button type="primary" @click="click"> 提交數據</a-button>
      </div>
      <a-form :form="editForm" layout="inline">
        <!--  使用v-model時，是以input事件從子組件拋出value值  -->
        <a-form-item label="v-model形式的綁定的 日期">
          <date-string-picker
            v-model="editForm.date"
            :trigger-change="false">
          </date-string-picker>
        </a-form-item>

        <!-- 在須要校驗的狀況下，在表單中使用v-decorator的形式綁定，
        同時自組件要以change的形式將value拋出到上層副組件 -->
        <!--        <a-form-item label="v-decorator形式綁定的 日期">-->
        <!--          <date-string-picker-->
        <!--            v-decorator="['date',{initialValue:''}]"-->
        <!--            :trigger-change="true">-->
        <!--          </date-string-picker>-->
        <!--        </a-form-item>-->
      </a-form>
    </div>
  </div>
</template>

<script>
import dateStringPicker from '@/component/dateStringPicker'

export default {
  name: 'demo',
  components: {
    dateStringPicker
  },
  data() {
    return {
      // 使用v-decorator要使用下面方法註冊form表單
      // editForm: this.$form.createForm(this)

      // v-model的形式，form表單註冊則比較簡單
      editForm: {
        date: ''
      }
    }
  },
  methods: {
    click() {
      console.log('點擊按鈕')
      // v-model綁定測試提交
      // console.log(this.editForm)

      // v-decorator綁定，測試數據提交
      this.editForm.validateFields((err, value) => {
        console.log(err)
        console.log(value)
      })
    }
  }
}
</script>

<style scoped lang="less">
.box {
  margin: 30px 30px;
}

.btn {
  margin: 30px 30px;
}
</style>

Find me

Gitee：https://gitee.com/heyhaiyon/ant-vue-admin.git

微信公衆號：heyhaiyang

掘金：heyhaiyang

博客園：heyhaiyang

頭條號：heyhaiyang