成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

tyheist / 2261人閱讀

摘要:基于的手機端日期選擇插件實際需求中總會有一些輪子是需要自己造的,比如現(xiàn)在說的這個時間選擇插件,在網(wǎng)上找了好多都和的交互需求差一點,做完后發(fā)出來分享一下吧,如果覺得不錯或者幫到你了請記得具體是這個樣子的預(yù)覽點這里手機端掃碼項目地址點這里如何使

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

實際需求中總會有一些輪子是需要自己造的,比如現(xiàn)在說的這個時間選擇插件,在網(wǎng)上找了好多都和UI的交互需求差一點,做完后發(fā)出來分享一下吧,如果覺得不錯或者幫到你了請記得star

具體是這個樣子的:

demo預(yù)覽點這里

手機端掃碼

項目地址點這里

如何使用

npm insatll

npm run dev

訪問localhost

props

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

事件

changeDate: 選擇成功后的事件 
            

事件參數(shù):

start:開始時間

end:結(jié)束時間,如果沒選結(jié)束時間,則開始時間=結(jié)束時間

注意:

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

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/94506.html

相關(guān)文章

  • 基于Vue2.x日期選擇組件

    摘要:基于日期選擇組件是一款稍微復(fù)雜的組件,其中涉及的日歷計算與顯示需要比較清晰的邏輯。 vue-datepicker - 基于Vue2.x日期選擇組件 Datepicker是一款稍微復(fù)雜的組件,其中涉及的日歷計算與顯示需要比較清晰的邏輯。 項目地址 https://github.com/watson-yan... 預(yù)覽圖 showImg(https://segmentfault.com/i...

    NusterCache 評論0 收藏0
  • 基于zepto移動輕量級日期插件

    摘要:本文簡單介紹近來寫的一款基于的移動端輕量級日期插件。再來看看兼容性對于移動開發(fā)足矣最后就是在綁定事件的兼容性問題,不同廠商對于這個事件的定義并不一致,比如里面監(jiān)聽的是事件,但是在安卓里面監(jiān)聽事件完全沒反應(yīng),經(jīng)過一番,發(fā)現(xiàn)安卓需要監(jiān)聽事件。 前言 做過移動Web開發(fā)的同學都知道,移動端日期選擇是很常見的需求。在PC端,我們有很豐富的選擇,比較出名的就有Mobiscroll和jQuery ...

    ranwu 評論0 收藏0
  • ElementUI日期選擇器時間選擇范圍限制

    Element是一套基于vue2.x的一個ui框架。官方文檔也很詳細,這里記錄一個element-ui日期插件的補充官方文檔中使用picker-options屬性來限制可選擇的日期,下面舉例補充: 單個日期時間輸入框 組件代碼: 情景1: 設(shè)置選擇今天以及今天之后的日期 data (){ return { pickerOptions0: { disabl...

    liangzai_cool 評論0 收藏0
  • 2017年2月份前資源分享

    平日學習接觸過的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個網(wǎng)址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用 擴展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    lily_wang 評論0 收藏0
  • 2017年2月份前資源分享

    平日學習接觸過的網(wǎng)站積累,以每月的形式發(fā)布。2017年以前看這個網(wǎng)址:http://www.kancloud.cn/jsfron... 1. Javascript 前端生成好看的二維碼 十大經(jīng)典排序算法(帶動圖演示) 為什么知乎前端圈普遍認為H5游戲和H5展示的JSer 個人整理和封裝的YU.js庫|中文詳細注釋|供新手學習使用 擴展JavaScript語法記錄 - 掉坑初期工具 漢字拼音轉(zhuǎn)換...

    chengjianhua 評論0 收藏0

發(fā)表評論

0條評論

tyheist

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<