欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vant 時(shí)間選擇器--開(kāi)始時(shí)間和結(jié)束時(shí)間實(shí)例

 更新時(shí)間:2020年11月04日 10:34:00   作者:風(fēng)景33  
這篇文章主要介紹了vant 時(shí)間選擇器--開(kāi)始時(shí)間和結(jié)束時(shí)間實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我就廢話不多說(shuō)了,大家還是直接看代碼吧~

<template>
  <div class="linesMigrate">
    <div class="conditionDiv">
      <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChooseStart">
        <div class="dateValueDiv" v-if="allDateStart">{{dateFormatterStart}}</div>
        <div class="dateValueDiv" v-if="!allDateStart" :style="{ fontSize:'0.72rem' }">{{dateFormatterStart}}</div>
      </div>
      <div class="singleCondition" :style="conditonStyle2" @click="showPopupDateChoose">
        <div class="dateValueDiv" v-if="allDate">{{dateFormatter}}</div>
        <div class="dateValueDiv" v-if="!allDate" :style="{ fontSize:'0.72rem' }">{{dateFormatter}}</div>
      </div>
    </div>
    <!-- 選開(kāi)始時(shí)間 -->
    <van-popup
        v-model="showDateChooseStart"
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
        :overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
      <div class="popupDate" :style="bgDateImgStyle">
      <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePopStart" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
      <van-datetime-picker
          :show-toolbar="false"
          v-model="dateChooseStart"
          type="date"
          :min-date="minDateStart"
          :max-date="maxDateStart"
      />
        <div class="chooseTodayDiv" @click="chooseDateStart">選擇最近一周</div>
      </div>
    </van-popup>
    <!-- 選結(jié)束時(shí)間 最近一天 -->
    <van-popup
        v-model="showDateChoose"
        position="bottom"
        :close-on-click-overlay="false"
        :style="{ height: '22rem',position: 'absolute',bottom:'3rem' }"
        :overlay-style="{ position: 'absolute', bottom: '3rem', top: 'auto', background: 'rgba(0, 0, 0, 0.298039215686275)' }">
      <div class="popupDate" :style="bgDateImgStyle">
      <img alt="..." src="../../assets/icon/downArrow.png" @click="closeDatePop" :style="{ marginBottom: '16%',width:'10%',marginTop:'7.7%',opacity:0 }" />
      <van-datetime-picker
          :show-toolbar="false"
          v-model="dateChoose"
          type="date"
          :min-date="minDate"
          :max-date="maxDate"
      />
        <div class="chooseTodayDiv" @click="chooseDateToday">選擇最新一天</div>
      </div>
    </van-popup>
 

    <Loading :isShow="loadingState" />
  </div>
</template>
 

<script>
  import Loading from '../../components/common/loading.vue';// 引入公共的loading組件
  import Vue from 'vue';
  import { Popup } from 'vant';
  import { DatetimePicker } from 'vant';
  
  Vue.use(DatetimePicker);
  Vue.use(Popup);
 

  export default {
    name: 'lines',
    mounted() {
      // 獲取數(shù)據(jù)
      this.loadingState=false;
      this.initRequest();
    },
    data() {
      return {
        // 時(shí)間選擇背景樣式數(shù)據(jù)
        conditonStyle2: {
          background: "url(" + require("../../assets/img/migrate2.png") + ") no-repeat center",
          backgroundSize: "contain"
        },
        // 日期組件彈出層展示與否的標(biāo)志 --開(kāi)始時(shí)間
        showDateChooseStart:false,
         // 日期組件彈出層展示與否的標(biāo)志
        showDateChoose:false,
        
        // 彈出層背景圖片
        bgDateImgStyle: {
          background: "url(" + require("../../assets/img/migratePopBackDate.png") + ") no-repeat",
          backgroundSize: "contain"
        },
        // 標(biāo)準(zhǔn)化未經(jīng)處理的時(shí)間格式
        dateChoose: new Date(),
        dateChooseStart: new Date(),
        // 處理過(guò)格式的日期數(shù)據(jù)
        dateFormatter:"日期",
        allDate:true,
        dateFormatterStart:"日期",
        allDateStart:true,
 

        minDateStart: new Date(2019,8,1), // 開(kāi)始時(shí)間最小2019/9/01
        maxDateStart: new Date(), // 開(kāi)始時(shí)間最大 當(dāng)前時(shí)間
        minDate: new Date(), //最小時(shí)間必須 》開(kāi)始的最大時(shí)間maxDateStart 
        maxDate: new Date(), // 開(kāi)始時(shí)間最大 當(dāng)前時(shí)間
 

        // 控制加載中狀態(tài)的標(biāo)志
        loadingState:true
      };
    },
    methods: {
      // 初始的請(qǐng)求方法
      async initRequest(){
        this.chooseDateToday();
        this.chooseDateStart();
      },
      // 展示日期彈出層--開(kāi)始時(shí)間
      showPopupDateChooseStart() {
        this.showDateChooseStart = true;
      },
      // 展示日期彈出層 --結(jié)束時(shí)間
      showPopupDateChoose() {
        // 設(shè)置結(jié)束時(shí)間的最小值
        this.minDate = this.dateChooseStart;
        this.showDateChoose = true;
      },
      
      // 關(guān)閉日期彈出層 ---開(kāi)始時(shí)間
      closeDatePopStart(){
        this.showDateChooseStart = false;
        this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
 

        // 設(shè)置結(jié)束時(shí)間的最小值
        this.minDate = this.dateChooseStart;
 

        this.allDateStart=false;
        // this.loadingState=true;
      },
      // 關(guān)閉日期彈出層 --結(jié)束時(shí)間
      closeDatePop(){
        this.showDateChoose = false;
        this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
 

        // 設(shè)置開(kāi)始時(shí)間的最大值
        this.maxDateStart = this.dateChoose;
 

        this.allDate=false;
        // this.loadingState=true;
      },
      
      // 日期格式轉(zhuǎn)換函數(shù)
      dateTransfor(date,format){
        var o = {
          "M+" : date.getMonth()+1,         //月份
          "d+" : date.getDate(),          //日
          "h+" : date.getHours(),          //小時(shí)
          "m+" : date.getMinutes(),         //分
          "s+" : date.getSeconds(),         //秒
          "q+" : Math.floor((date.getMonth()+3)/3), //季度
          "S" : date.getMilliseconds()       //毫秒
        };
        if(/(y+)/.test(format)) {
          format=format.replace(RegExp.$1, (date.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;
      },
      // 選擇時(shí)間函數(shù) -- 七天前
      chooseDateStart(){
        let yesToday=new Date();
        yesToday.setDate(yesToday.getDate()-7);
        this.dateChooseStart=yesToday;
        this.dateFormatterStart=this.dateTransfor(this.dateChooseStart,"yyyy-MM-dd");
      },
      // 選擇時(shí)間函數(shù) -- 今日
      chooseDateToday(){
        this.dateChoose= new Date();
        this.dateFormatter=this.dateTransfor(this.dateChoose,"yyyy-MM-dd");
      },
      // 選擇時(shí)間函數(shù) i=0今日
      chooseDate(i){
        let yesToday=new Date();
        yesToday.setDate(yesToday.getDate()-i);
        return this.dateTransfor(yesToday,"yyyy-MM-dd");
      },
 

    },
    components: {
      Loading
    }
  };
</script>
<style scoped>
  /*覆蓋原有彈出層樣式*/
  .van-popup {
    position: absolute;
    background: transparent;
    /*bottom: 3.01rem;*/
  }
  /*覆蓋日期組件原有樣式*/
  .van-picker{
    position: relative;
    background-color: #fff;
    user-select: none;
    width: 100%;
  }
 
  /*篩選條件們的div樣式*/
  .conditionDiv{
    display: flex;
    justify-content: center;
    width: 100%;
    height: 3.7%;
    margin-top: 4%;
  }
  /*單個(gè)篩選條件的樣式*/
  .singleCondition{
    width: 27%;
    margin-left: 2%;
    margin-right: 2%;
    /*border: 1px solid #451da4;*/
    height: 100%;
    /*padding-right: 5%;*/
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    /*flex-direction: column;*/
    font-size: 0.72rem;
  }
  /*日期組件的div,由于其背景用icon而非整個(gè)背景圖,因此樣式上不同*/
  .singleDateDiv{
    width: 23%;
    margin-left: 2%;
    margin-right: 2%;
    /*border: 1px solid #451da4;*/
    height: 100%;
    color: #fff;
    padding-right: 5%;
    display: flex;
    justify-content: flex-start;
  }
  /*日期的值位置樣式*/
  .dateValueDiv{
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 0.72rem;
    width: 82%;
  }
  /*日期彈出層中選擇今天div樣式*/
  .chooseTodayDiv{
    box-sizing: border-box;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    color: red;
    height: 3rem;
    width: 90%;
    background: #fff;
    border-top: 1px solid lightgrey;
    font-size: 0.875rem;
  }
  
  /*日期彈窗*/
  .popupDate {
    border-radius: 2px;
    background: #fff;
    height: 100%;
    width: 90%;
    margin: 0 auto;
  }
 

</style>
<style>
  /*覆蓋原有的選擇器樣式*/
  .van-picker-column{
    font-size: 0.9rem;
  }
</style>

補(bǔ)充知識(shí):Vant庫(kù)的使用,及日期組件的一些注意點(diǎn)

Vant庫(kù)對(duì)于開(kāi)發(fā)商城類項(xiàng)目,真的是非常nice,會(huì)讓你情不自禁愛(ài)上它。Vant庫(kù)支持按需加載、為移動(dòng)端商城設(shè)計(jì)的風(fēng)格,非常完美。但是,本人在實(shí)際開(kāi)發(fā)中,也遇到了一些小問(wèn)題,折騰了老半天,最終得以解決。

下面先說(shuō)說(shuō)在vue中使用Vant庫(kù)的流程及一些注意事項(xiàng),以及遇到的坑和解決辦法。

首先送上官網(wǎng)傳送門:www.youzanyun.com/zanui/vant#…,具體的api可自行查閱使用。

第一步,安裝:

cnpm i vant -S

第二步,引入組件:

關(guān)于怎么引入Vant組件,有全局引入(非常不推薦)和按需引入兩種方式

這里演示按需引入的方式,因?yàn)楣倬W(wǎng)說(shuō)的稍微有些復(fù)雜,對(duì)于一些剛接觸的小伙伴,可能會(huì)造成一些誤解(PS:我在剛開(kāi)始接觸的時(shí)候這里就蹲了兩個(gè)坑,簡(jiǎn)直欲哭無(wú)淚呀~)。直接說(shuō)怎么用吧:

為了方便我們按需引入組件,這里還需要安裝一個(gè)插件

cnpm i babel-plugin-import -D

安裝好該插件好,還需要在.babelrc文件中plugins那里進(jìn)行一個(gè)簡(jiǎn)單的配置,這里附上完整的plugins部分內(nèi)容。這里我們?cè)趐lugins數(shù)組中插入了import那個(gè)數(shù)組,其他內(nèi)容是原來(lái)就有的。

"plugins": [  
  "transform-vue-jsx",   
  "transform-runtime",  
  ["import", {   
    "libraryName": "vant",   
    "libraryDirectory": "es",   
    "style": true  
  }]
]

完成好配置后,在main.js中按需引入你需要的組件。例如這里引入Vant的button組件:

import { Button } from 'vant'; // 在mian.js中通過(guò)import導(dǎo)入組件,多個(gè)組件直接在{,,,}加入即可
Vue.use(Button); //讓vue加載該組件如果還需要用其他組件,可以這樣寫Vue.use(Button).use().user();
<van-button type="default">默認(rèn)按鈕</van-button> // 在template中使用組件

這里提一點(diǎn),如果是類似Toast這種組件,只需要在main.js中引入就好:

import { Toast } from 'vant';
 
// 然后在你需要的頁(yè)面直接這樣使用就好
// 只要引入后,vant就會(huì)自動(dòng)把Toast組件掛在vue的原型上Vue.prototype.$Toast = Toast;
this.$Toast('message');

可以看到,這里button組件以及正常導(dǎo)入使用了。Vant中還有更多適合實(shí)際開(kāi)發(fā)的功能更豐富的組件,小伙伴們自行查閱官方文檔使用吧。

附官網(wǎng)API文檔傳送門:www.youzanyun.com/zanui/vant#…

最后,在說(shuō)一個(gè)關(guān)于Vant日期組件使用時(shí)所遇到的一個(gè)大坑。

Vant日期組件的官網(wǎng)api沒(méi)有給出關(guān)于事件函數(shù)的使用demo,到時(shí)小編在使用時(shí)不小心邁進(jìn)了一個(gè)大坑。

就是change或者confirm事件時(shí),怎么都獲取不到回調(diào)參數(shù),即在點(diǎn)擊確定時(shí)回去不到返回的選中時(shí)間,總是提示undefined或者null。下面是小編錯(cuò)誤的寫法,大家不要踩坑:

<!--這是html部門-->
<van-datetime-picker   
  v-model="currentDate"   
  type="datetime"   
  @confirm="confirm()"   
  @change="change()" />
 
// 這是對(duì)應(yīng)的方法
methods: {
  confirm(val) {
    console.log(val)
  },
  change(e) {
    console.log(e.getValues())
  }
}

乍一看,是按照文檔上說(shuō)的方式使用的呀,可是不僅confirm沒(méi)有返回選中的日期時(shí)間,change事件的各種回調(diào)方式也使用不了。

但是吧,如果你要打印1,又可以打印出來(lái),說(shuō)明接口走這個(gè)方法了。

到底怎么回事呢,選中的時(shí)間怎么就出不來(lái)呢?小編差點(diǎn)都要懷疑是不是這個(gè)Vant組件有問(wèn)題了!

說(shuō)重點(diǎn):后來(lái)小編終于找到了解決辦法:

原來(lái)是這里出了問(wèn)題,@confirm="confirm()" @change="change()"

這里多加了一對(duì)括號(hào),正確的寫法是

<!--這是html部分-->
<van-datetime-picker   
  v-model="currentDate"   
  type="datetime"   
  @confirm="confirm"   
  @change="change" 
/>
 
// 這是對(duì)應(yīng)的方法
methods: {
  confirm(val) {
    console.log(val) // 打印出了時(shí)間
  },
  change(e) {
    console.log(e.getValues()) // 打印出了選中的時(shí)間,是個(gè)數(shù)組
  }
}

到這,問(wèn)題圓滿解決了!

以上這篇vant 時(shí)間選擇器--開(kāi)始時(shí)間和結(jié)束時(shí)間實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • vue3中實(shí)現(xiàn)音頻播放器APlayer的方法

    vue3中實(shí)現(xiàn)音頻播放器APlayer的方法

    這篇文章主要介紹了vue3中實(shí)現(xiàn)音頻播放器APlayer的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • Vuex進(jìn)行Echarts數(shù)據(jù)頁(yè)面初始化后如何更新dom

    Vuex進(jìn)行Echarts數(shù)據(jù)頁(yè)面初始化后如何更新dom

    這篇文章主要為大家詳細(xì)介紹了使用Vuex做Echarts數(shù)據(jù)時(shí),當(dāng)頁(yè)面初始化后如何更新dom,文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-11-11
  • vue實(shí)現(xiàn)購(gòu)物車的監(jiān)聽(tīng)

    vue實(shí)現(xiàn)購(gòu)物車的監(jiān)聽(tīng)

    這篇文章主要為大家詳細(xì)介紹了利用vue的監(jiān)聽(tīng)事件實(shí)現(xiàn)一個(gè)簡(jiǎn)單購(gòu)物車,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-04-04
  • 基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果

    基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果

    這篇文章主要為大家詳細(xì)介紹了基于Vue.js 2.0實(shí)現(xiàn)百度搜索框效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-09-09
  • vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

    vue.js利用defineProperty實(shí)現(xiàn)數(shù)據(jù)的雙向綁定

    本篇文章主要介紹了用Node.js當(dāng)作后臺(tái)、jQuery寫前臺(tái)AJAX代碼實(shí)現(xiàn)用戶登錄和注冊(cè)的功能的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
    2017-04-04
  • Vue3通用API功能示例剖析

    Vue3通用API功能示例剖析

    這篇文章主要為大家介紹了Vue3通用API功能示例剖析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2023-05-05
  • vue 組件間的通信之子組件向父組件傳值的方式

    vue 組件間的通信之子組件向父組件傳值的方式

    這篇文章主要介紹了vue 組件間的通信之子組件向父組件傳值的方式總結(jié),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-07-07
  • vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式

    vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式

    這篇文章主要給大家介紹了關(guān)于vue中實(shí)現(xiàn)div可編輯并插入指定元素與樣式的相關(guān)資料,文中通過(guò)代碼以及圖文將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2023-09-09
  • Vue之封裝公用變量以及實(shí)現(xiàn)方式

    Vue之封裝公用變量以及實(shí)現(xiàn)方式

    這篇文章主要介紹了Vue之封裝公用變量以及實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-07-07
  • Vue-cli-webpack搭建斗魚(yú)直播步驟詳解

    Vue-cli-webpack搭建斗魚(yú)直播步驟詳解

    斗魚(yú)直播是比較火的直播視頻,想必大家都看過(guò)吧。這篇文章主要介紹了Vue-cli-webpack搭建斗魚(yú)直播步驟詳解,需要的朋友可以參考下
    2017-11-11

最新評(píng)論