您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么給vant的Calendar日歷組件添加備注”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
先引入Calendar組件
最近做的一個項目有用到日歷 需要自定義日期文案
poppable
設(shè)置為false,代表日歷會直接平鋪展示在頁面中 ,不是以彈層的形式出現(xiàn)
show-confirm
設(shè)置為false, 代表是不顯示日歷的確定按鈕,用戶點擊任意日期就立即觸發(fā)confirm事件
min-date
最小日期段
max-date
最大日期段
formatter
自定義日期文案 我用來給每個日期添加備注
className
額外類名
<!-- 日期表格 --> <van-calendar title="日歷" :poppable="false" :show-confirm="false" : :min-date="minDate" :max-date="maxDate" @confirm="confirmFn" :formatter="formatter" :className="'van-calendar__top-info'" />
export default { name: 'DoctorData', data() { return { // 醫(yī)生id doctorId: '', // 姓名信息 doctorInfo: {}, // 所點擊的時間 timeValue: '', // 醫(yī)生排班預(yù)約次數(shù)和day值 curNums: [], // 最小時間值 當(dāng)前時間 minDate: new Date() } }, created() { // 接受上一層傳來的數(shù)據(jù) this.doctorId = this.$route.params.doctorId this.doctorInfo = this.$route.params.doctorInfo // 獲取醫(yī)生排版日期預(yù)約次數(shù) this.getDoctorData() }, methods: { // 獲取醫(yī)生排版日期預(yù)約次數(shù) async getDoctorData() { // 發(fā)送請求獲取后臺數(shù)據(jù) const data = await this.$http.get(`doctorScheduleDataJson?id=${this.doctorId}&openId=123213`) if (data.status !== 200) { return this.$Toast.fail('獲取醫(yī)生排版預(yù)約次數(shù)失敗') } // 取出剩余次數(shù)和day的值 let b = [] for (let a in data.data) { console.log(data.data[a].day) console.log(data.data[a].cur_num) b = { key: data.data[a].day, value: data.data[a].cur_num } this.curNums.push(b) } console.log(this.curNums); // 打印的格式 [0:{key:14,value:57},1:{key:15,value:57},2:{key:16,value:0}] }, // 日期添加備注 formatter(day) { // 當(dāng)前月份的日 var date = day.date.getDate() for (let i = 0; i < this.curNums.length; i++) { // 當(dāng)前點擊的日相同 if (date == this.curNums[i].key) { // 判斷預(yù)約次數(shù)是否為0 if (this.curNums[i].value == 0) { // 日期添加備注 day.topInfo = '已約滿' } else { // 日期添加備注 day.topInfo = '可預(yù)約' } } } return day }, // 點擊任意日期 confirmFn(data) { console.log(data); this.timeValue = this.timeFormat(data) for (let i = 0; i < this.curNums.length; i++) { // 如果當(dāng)前點擊的日 相同 if (this.timeValue == this.curNums[i].key) { // 當(dāng)前日期的預(yù)約次數(shù)為0 提示用戶并不可跳轉(zhuǎn) if (this.curNums[i].value == 0) { return this.$Toast.fail('當(dāng)前日期已約滿') } this.$router.push({ name: 'Registration', params: { data: data } }) } } }, // 時間格式化 2019-09-08 timeFormat(time) { let year = time.getFullYear() let month = time.getMonth() + 1 let day = time.getDate() return day }, }, computed: { // 最大日期為當(dāng)前時間日期+預(yù)約時間段 maxDate() { let curDate = new Date().getTime() // 后臺返回的預(yù)約天數(shù)(7) - 1 因為不減一 會多出一天 預(yù)約天數(shù)為7 頁面會顯示8天 let one = (this.doctorInfo.bookDayNum - 1) * 24 * 3600 * 1000 let oneYear = curDate + one return new Date(oneYear) } } }
<style lang="less" scoped> // 日歷備注 .van-calendar__top-info { background: linear-gradient(86deg, rgba(212, 165, 116, 0.98), rgba(238, 202, 163, 0.98)); } </style>
效果圖:
vant的日歷組建只支持縱向變化,不支持橫向,就稍微改變了一下
<template> <div class="calendar-wrap" > <div class="month-year">{{showYear}}年{{showMonth+1}}月</div> <van-icon class="arrow" @click="deMonth" name="arrow" /> <van-icon class="arrow-left" @click="adMonth" name="arrow-left" /> <van-icon class="arrow-year" @click="deYear" name="arrow" /> <van-icon class="arrow-year-1" @click="deYear" name="arrow" /> <van-icon class="arrow-left-year-1" @click="adYear" name="arrow-left" /> <van-icon class="arrow-left-year" @click="adYear" name="arrow-left" /> <van-calendar class="calendar" ref="calendar" color="#399f0e" row-height="40" :min-date="minDate" :max-date="maxDate" :default-date="nowDay" :poppable="false" :show-subtitle="false" :show-title="false" :show-mark="false" :show-confirm="false" :formatter="formatterDay" @select="slecetDay" > <template #bottom-info="item" > <span class="mark-green" v-if="item.bottomInfo==1"></span> <span class="mark-red" v-if="item.bottomInfo==2"></span> </template> </van-calendar> </div> </template>
<script> export default { data(){ return{ minDate: new Date(), maxDate: new Date(), defaultDate: new Date(), monthCont: 0, yearCont:0, year: new Date().getFullYear(), month: new Date().getMonth(), nowDay:new Date(), showYear: new Date().getFullYear(), showMonth:new Date().getMonth(), } } watch:{ defaultDate(val) { this.setMinMaxDay(); } }, methods:{ formatterDay(day){ return day; }, slecetDay(day){ }, // 當(dāng)前月上一個月 deMonth() { this.monthCont--; this.defaultDate = new Date( this.year, this.month + this.monthCont, 1 ); }, // 當(dāng)前月下一個月 adMonth() { this.monthCont++; this.defaultDate = new Date( this.year, this.month + this.monthCont, 1 ); }, // 當(dāng)前年上一個年 deYear() { this.yearCont--; this.defaultDate = new Date( this.year+ this.yearCont, this.month, 1 ); }, // 當(dāng)前年下一個年 adYear() { this.yearCont++; this.defaultDate = new Date( this.year+ this.yearCont, this.month , 1 ); }, setMinMaxDay(){ this.showYear= this.defaultDate.getFullYear(); this.showMonth = this.defaultDate.getMonth(); var firstDay = new Date(this.defaultDate); firstDay.setDate(1) var endDay = new Date(this.showYear,this.showMonth+1,1); this.minDate =new Date( this.showYear, this.showMonth, firstDay.getDate() ) endDay.setDate(0) this.maxDate =new Date( this.showYear, this.showMonth, endDay.getDate() ) } } } </script>
<style scoped lang='scss'> .calendar-wrap::v-deep{ width: 100%; position: relative; .van-calendar__month-title{ display: none; } .mark-red{ display: block; width: 5px; height: 5px; background-color: #d46b08; border-radius: 50%; margin: 0 auto; } .mark-green{ display: block; width: 5px; height: 5px; background-color: #389e0d; border-radius: 50%; margin: 0 auto; } .month-year{ padding: 10px 0; text-align: center; font-size: 14px; } .arrow{ position: absolute; top: 15px; right: 10px; } .arrow-left{ position: absolute; top: 15px; left: 10px; } .arrow-year{ position: absolute; top: 15px; right: 30px; } .arrow-left-year{ position: absolute; top: 15px; left: 30px; } .arrow-year-1{ position: absolute; top: 15px; right: 35px; } .arrow-left-year-1{ position: absolute; top: 15px; left: 35px; } } </style>
vant icon沒找到雙箭頭就用2個單箭頭組合一下
“怎么給vant的Calendar日歷組件添加備注”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。