基於vue2.x的手機端日期選擇插件

基於vue2.x的手機端日期選擇插件

實際需求中總會有一些輪子是須要本身造的，好比如今說的這個時間選擇插件，在網上找了好多都和UI的交互需求差一點，作完後發出來分享一下吧，若是以爲不錯或者幫到你了請記得star

具體是這個樣子的：

demo預覽點這裏

手機端掃碼

項目地址點這裏

如何使用

• npm insatll
• npm run dev
• 訪問localhost

props

showCalendar: {
      type: Boolean, //控制顯示隱藏
      default: false
    },
    options: {
      type: Object,
      default() {
        return {
          start: "", // 開始日期
          end: "", // 結束日期
          maxDate: "12m", // 月份跨度
          startDate: "", // 默認選中的開始日期,
          endDate: "" // 默認選中的結束日期
        };
      }
    },
    isDoubleCheck: {
      type: Boolean,//是否雙選，false的話只能選擇一個時間
      default: true
    }

事件

changeDate: 選擇成功後的事件

事件參數：

1. start：開始時間
2. end：結束時間，若是沒選結束時間，則開始時間=結束時間

注意：

默認使用了better-scroll（滑動體驗） 和 fast-click（去除手機端點擊的300ms延遲）兩個依賴，都是爲了讓體驗更加好