摘要:基于的手機端日期選擇插件實際需求中總會有一些輪子是需要自己造的,比如現在說的這個時間選擇插件,在網上找了好多都和的交互需求差一點,做完后發出來分享一下吧,如果覺得不錯或者幫到你了請記得具體是這個樣子的預覽點這里手機端掃碼項目地址點這里如何使
基于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: 選擇成功后的事件
事件參數:
start:開始時間
end:結束時間,如果沒選結束時間,則開始時間=結束時間
注意:
默認使用了better-scroll(滑動體驗) 和 fast-click(去除手機端點擊的300ms延遲)兩個依賴,都是為了讓體驗更加好
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94506.html
摘要:基于日期選擇組件是一款稍微復雜的組件,其中涉及的日歷計算與顯示需要比較清晰的邏輯。 vue-datepicker - 基于Vue2.x日期選擇組件 Datepicker是一款稍微復雜的組件,其中涉及的日歷計算與顯示需要比較清晰的邏輯。 項目地址 https://github.com/watson-yan... 預覽圖 showImg(https://segmentfault.com/i...
摘要:本文簡單介紹近來寫的一款基于的移動端輕量級日期插件。再來看看兼容性對于移動開發足矣最后就是在綁定事件的兼容性問題,不同廠商對于這個事件的定義并不一致,比如里面監聽的是事件,但是在安卓里面監聽事件完全沒反應,經過一番,發現安卓需要監聽事件。 前言 做過移動Web開發的同學都知道,移動端日期選擇是很常見的需求。在PC端,我們有很豐富的選擇,比較出名的就有Mobiscroll和jQuery ...
Element是一套基于vue2.x的一個ui框架。官方文檔也很詳細,這里記錄一個element-ui日期插件的補充官方文檔中使用picker-options屬性來限制可選擇的日期,下面舉例補充: 單個日期時間輸入框 組件代碼: 情景1: 設置選擇今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...
平日學習接觸過的網站積累,以每月的形式發布。2017年以前看這個網址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用 擴展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉換...
平日學習接觸過的網站積累,以每月的形式發布。2017年以前看這個網址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用 擴展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉換...
閱讀 5257·2021-09-22 15:50
閱讀 1863·2021-09-02 15:15
閱讀 1164·2019-08-29 12:49
閱讀 2543·2019-08-26 13:31
閱讀 3458·2019-08-26 12:09
閱讀 1210·2019-08-23 18:17
閱讀 2736·2019-08-23 17:56
閱讀 2929·2019-08-23 16:02