使用Vant怎么封裝一個(gè)下拉日期控件

這篇文章將為大家詳細(xì)講解有關(guān)使用Vant怎么封裝一個(gè)下拉日期控件，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

淅川網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站設(shè)計(jì)等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。

需求分析

在實(shí)際項(xiàng)目中，表單里面的日期選擇是常用的組件。Vant有提供日期組件，但是居然沒(méi)有提供下拉形式的日期組件，不過(guò)該有的元件都有，就自己封裝一個(gè)。

封裝組件過(guò)程中我們要解決：

和表單的樣式能兼容
錯(cuò)誤提示
參數(shù)問(wèn)題
事件機(jī)制
格式化

解決問(wèn)題

就給新的組件取名為 VantFieldDate。

期望使用的時(shí)候是這樣的

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

具體實(shí)現(xiàn)，我貼上代碼詳細(xì)講解。

<template>
 <div class="vant-field-date">
  <van-cell
   :title="label"
   :class="{'readonly': readonly, 'placeholder' : text}"
   :is-link="!readonly"
   :required="required"
   @click="show">
   <!-- 顯示當(dāng)前值，沒(méi)有值顯示提示文字 -->
   {{ text ? text : placeholder }}
   <!-- 自定義錯(cuò)誤顯示 -->
   <div
    v-if="$attrs.error"
    v-text="$attrs['error-message']"
    class="van-field__error-message"
   />
  </van-cell>
  <!-- 用 actionsheet 來(lái)包裹彈出層日期控件 -->
  <van-actionsheet v-model="isShowPicker">
   <!-- $attrs 可以把根節(jié)點(diǎn)的attr放到目標(biāo)組件上，如此可以像使用 DatePicker 組件一樣使用這個(gè)新組件 -->
   <van-datetime-picker
    v-bind="$attrs"
    :type="type"
    title="請(qǐng)選擇日期"
    :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會(huì)報(bào)錯(cuò)
   },
   // Cell 顯示的文字
   label: {
    type: String,
    default: null
   },
   // 必填的星號(hào)
   required: {
    type: Boolean,
    default: false
   },
   // 只讀狀態(tài)
   readonly: {
    type: Boolean,
    default: false
   },
   // 占位提示文字
   placeholder: {
    type: String,
    default: '請(qǐng)選擇'
   },
   // 展示的格式化
   format: {
    type: String,
    default: null
   }
  },
  data() {
   return {
    selectedItem: null,
    isShowPicker: false
   }
  },
  computed: {
   // 展示的格式化，時(shí)間提交的值是Date類型數(shù)據(jù)
   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 值，第二個(gè)參數(shù)是毫秒數(shù)，第三個(gè)參數(shù)是原始值，根據(jù)自己的項(xiàng)目的數(shù)據(jù)結(jié)構(gòu)來(lái)修改
    // input 事件同時(shí)也會(huì)觸發(fā) vee-validate 的驗(yàn)證事件
    this.$emit('input', value.getTime(), value)
    // onChange事件，雖然重寫 @input可以實(shí)現(xiàn)，但這樣會(huì)破壞 v-model 寫法。
    this.$emit('change', value.getTime(), value)
    this.cancel()
   },
   // 隱藏彈框
   cancel() {
    this.isShowPicker = false
   }
  }
 }
</script>

關(guān)于使用Vant怎么封裝一個(gè)下拉日期控件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

分享題目：使用Vant怎么封裝一個(gè)下拉日期控件
URL網(wǎng)址：http://bm7419.com/article48/jdcdep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、定制網(wǎng)站、手機(jī)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、微信公眾號(hào)、搜索引擎優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容