快捷導(dǎo)航

Vue使用vant實(shí)現(xiàn)日期選擇器功能

更新時(shí)間：2024年08月09日 09:00:09 作者：小蹦跶兒

在當(dāng)今前端開(kāi)發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開(kāi)發(fā)者青睞,而 Vant 是一個(gè)輕量的移動(dòng)端組件庫(kù),為 Vue 應(yīng)用的開(kāi)發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過(guò) Vant 來(lái)實(shí)現(xiàn)日期選擇器的使用,需要的朋友可以參考下

前言

在當(dāng)今前端開(kāi)發(fā)的領(lǐng)域中，Vue 框架因其高效和靈活的特性備受開(kāi)發(fā)者青睞。而 Vant 是一個(gè)輕量的移動(dòng)端組件庫(kù)，為 ???????Vue 應(yīng)用的開(kāi)發(fā)提供了豐富且便捷的功能組件。在眾多的組件應(yīng)用中，日期選擇器又是一個(gè)常見(jiàn)且重要的需求。

本文將就如何在 Vue 框架中通過(guò) Vant 來(lái)實(shí)現(xiàn)日期選擇器的使用。

一、實(shí)現(xiàn)的效果

二、實(shí)現(xiàn)方案

可參考vant官網(wǎng)。

注：使用前要注意項(xiàng)目是 Vue2 還是 Vue3 ，所用到的Vant版本是不一樣的！

由于我的項(xiàng)目是Vue2的，所以本文用的Vant版本是Vant2。

在現(xiàn)有項(xiàng)目中使用 Vant 時(shí)，可以通過(guò) npm 或 yarn 進(jìn)行安裝：

// Vue 3 項(xiàng)目，安裝最新版 Vant：
npm i vant -S

// Vue 2 項(xiàng)目，安裝 Vant 2：
npm i vant@latest-v2 -S

我這邊的項(xiàng)目比較小，暫時(shí)用到幾個(gè)組件，所以用了按需引入的方式：

首先在src文件下新建plugins文件，里面新建vant.js，如下圖：

import Vue from 'vue'
import {List, Uploader, Toast, Popup, DatetimePicker} from 'vant'

const uses = [List, Uploader, Toast, Popup, DatetimePicker]

uses.forEach(use => {
  Vue.use(use)
})

然后在main.js中引入此文件，如下圖：

完成這兩步操作之后，后續(xù)在頁(yè)面里就能夠正常加以使用了。

在使用日期選擇器的時(shí)候，結(jié)合了彈出層一起使用：

用彈出層將日期選擇器包起來(lái)。

彈出層設(shè)置了 底部彈出、圓角彈窗、40%的高度，這些屬性都可以根據(jù)自己項(xiàng)目實(shí)際情況進(jìn)行調(diào)整.

<van-popup v-model="show" position="bottom" round :style="{ height: '40%' }">
    <van-datetime-picker
      v-model="currentDate"
      type="date"
      title="請(qǐng)選擇日期"
      :formatter="formatter"
      @change="change"
      @confirm="confirm"
      @cancel="cancel"
      safe-area-inset-bottom
    />
</van-popup>

DatetimePicker 通過(guò) type 屬性來(lái)定義需要選擇的時(shí)間類(lèi)型，type 為 date 表示選擇年月日。
在默認(rèn)的日期選擇器中，數(shù)字的后面是不帶“年月日”這幾個(gè)字的：

如果想要實(shí)現(xiàn)效果圖中帶“年月日”字樣的，則需要加上formatter屬性即可：

    formatter(type, val) {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      return val;
    },

如果想要日期選擇器彈出來(lái)的時(shí)候，默認(rèn)是當(dāng)天的日期：

// 在data中設(shè)置即可
currentDate: new Date(),

另外可以通過(guò) min-date 和 max-date 屬性可以確定可選的時(shí)間范圍，不過(guò)我這邊沒(méi)有用到此屬性，用的時(shí)候可參考文檔進(jìn)行設(shè)置即可。
日期選擇器總共三個(gè)事件，需要哪個(gè)直接用即可：

    change(val) {
      console.log(val, 'val')
    },
    confirm() {
      this.dateValue = this.timeFormat(this.currentDate);
      console.log(this.dateValue, 'dateValue')
      this.cancel();
    },
    cancel() {
      this.show = false;
    },

如果想在點(diǎn)擊日期選擇器的“完成”按鈕時(shí)，讓時(shí)間顯示成 **** 年 * 月 * 日 的格式，需要單獨(dú)寫(xiě)一個(gè)格式化時(shí)間的方法，在confirm事件中調(diào)用即可：

    timeFormat(time) { // 時(shí)間格式化 ****年*月*日
      let year = time.getFullYear();
      let month = time.getMonth() + 1;
      let day = time.getDate();
      return year + '年' + month + '月' + day + '日';
    },

這樣選擇完時(shí)間后，顯示出來(lái)的就是下圖這種：