vue的h5日歷組件實(shí)現(xiàn)詳解
本文實(shí)例為大家分享了vue的h5日歷組件實(shí)現(xiàn)代碼,供大家參考,具體內(nèi)容如下
日歷樣式自定義
日歷組件
<template> ? <section class="wh_container"> ? ? <div class="wh_content_all"> ? ? ? <div class="wh_top_changge"> ? ? ? ? <li @click="PreMonth(myDate,false)"> ? ? ? ? ? <div class="wh_jiantou1"></div> ? ? ? ? </li> ? ? ? ? <li class="wh_content_li">{{dateTop}}</li> ? ? ? ? <li @click="NextMonth(myDate,false)"> ? ? ? ? ? <div class="wh_jiantou2"></div> ? ? ? ? </li> ? ? ? </div> ? ? ? <div class="wh_content"> ? ? ? ? <div class="wh_content_item" v-for="(tag,index) in textTop" :key="index"> ? ? ? ? ? <div class="wh_top_tag">{{tag}}</div> ? ? ? ? </div> ? ? ? </div> ? ? ? <div class="wh_content"> ? ? ? ? <div ? ? ? ? ? class="wh_content_item" ? ? ? ? ? v-for="(item,index) in list" ? ? ? ? ? @click="clickDay(item,index)" ? ? ? ? ? :key="index" ? ? ? ? > ? ? ? ? ? <!-- <div ? ? ? ? ? ? class="wh_item_date" ? ? ? ? ? ? :class="item.isToday?'wh_isToday':item.isPreDay?'wh_chose_day':item.isChosedDay?'wh_chose_day':''" ? ? ? ? ? >{{item.id}}</div>--> ? ? ? ? ? <div ? ? ? ? ? ? class="wh_item_date" ? ? ? ? ? ? v-bind:class="[{ wh_isMark: item.isMark}, ? ? ? ? ? ? {wh_other_dayhide:item.otherMonth!=='nowMonth'}, ? ? ? ? ? ? {wh_want_dayhide:item.dayHide}, ? ? ? ? ? ? {wh_isToday:item.isToday}, ? ? ? ? ? ? {wh_chose_day:item.chooseDay},setClass(item)]" ? ? ? ? ? >{{item.id}}</div> ? ? ? ? </div> ? ? ? </div> ? ? </div> ? </section> </template> <script> import moment from "moment"; import timeUtil from "./calendar"; import Vue from "vue"; export default { ? data() { ? ? return { ? ? ? myDate: [], ? ? ? list: [], ? ? ? historyChose: [], ? ? ? dateTop: "", ? ? }; ? }, ? props: { ? ? rangeDate: { ? ? ? type: Array, ? ? ? default: () => [], ? ? }, ? ? markDate: { ? ? ? type: Array, ? ? ? default: () => [], ? ? }, ? ? markDateMore: { ? ? ? type: Array, ? ? ? default: () => [], ? ? }, ? ? textTop: { ? ? ? type: Array, ? ? ? default: () => ["一", "二", "三", "四", "五", "六", "日"], ? ? }, ? ? sundayStart: { ? ? ? type: Boolean, ? ? ? default: () => false, ? ? }, ? ? agoDayHide: { ? ? ? type: String, ? ? ? default: `0`, ? ? }, ? ? futureDayHide: { ? ? ? type: String, ? ? ? default: `2554387200`, ? ? }, ? }, ? created() { ? ? this.intStart(); ? ? // 獲取今日的日期 ? ? var curDate = new Date(); ? ? var preDate = Date.parse(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)); //前一天 ? ? this.myDate = new Date(preDate); ? ? console.log(this.rangeDate); ? }, ? methods: { ? ? intStart() { ? ? ? timeUtil.sundayStart = this.sundayStart; ? ? }, ? ? setClass(data) { ? ? ? // console.log('data',data) ? ? ? let obj = {}; ? ? ? obj[data.markClassName] = data.markClassName; ? ? ? return obj; ? ? }, ? ? // 點(diǎn)擊選擇的日期 ? ? clickDay: function (item, index) { ? ? ? console.log("in", "kkkkkk", item); ? ? ? if (item.otherMonth === "nowMonth" && !item.dayHide) { ? ? ? ? console.log("in", "kkkkkk"); ? ? ? ? this.getList(this.myDate, item.date); ? ? ? } ? ? ? if (item.otherMonth !== "nowMonth") { ? ? ? ? item.otherMonth === "preMonth" ? ? ? ? ? ? this.PreMonth(item.date) ? ? ? ? ? : this.NextMonth(item.date); ? ? ? } ? ? }, ? ? // 選擇月份 ? ? ChoseMonth: function (date, isChosedDay = true) { ? ? ? date = timeUtil.dateFormat(date); ? ? ? this.myDate = new Date(date); ? ? ? this.$emit("changeMonth", timeUtil.dateFormat(this.myDate)); ? ? ? if (isChosedDay) { ? ? ? ? this.getList(this.myDate, date, isChosedDay); ? ? ? } else { ? ? ? ? this.getList(this.myDate); ? ? ? } ? ? }, ? ? // 上一個(gè)月的切換 ? ? PreMonth: function (date, isChosedDay = true) { ? ? ? date = timeUtil.dateFormat(date); ? ? ? this.myDate = timeUtil.getOtherMonth(this.myDate, "preMonth"); ? ? ? this.$emit("changeMonth", timeUtil.dateFormat(this.myDate)); ? ? ? if (isChosedDay) { ? ? ? ? this.getList(this.myDate, date, isChosedDay); ? ? ? } else { ? ? ? ? this.getList(this.myDate); ? ? ? } ? ? }, ? ? // 下一個(gè)月的切換 ? ? NextMonth: function (date, isChosedDay = true) { ? ? ? date = timeUtil.dateFormat(date); ? ? ? this.myDate = timeUtil.getOtherMonth(this.myDate, "nextMonth"); ? ? ? this.$emit("changeMonth", timeUtil.dateFormat(this.myDate)); ? ? ? if (isChosedDay) { ? ? ? ? this.getList(this.myDate, date, isChosedDay); ? ? ? } else { ? ? ? ? this.getList(this.myDate); ? ? ? } ? ? }, ? ? // 數(shù)據(jù)格式化的處理 ? ? forMatArgs: function () { ? ? ? let markDate = this.markDate; ? ? ? let markDateMore = this.markDateMore; ? ? ? let rangeDate = this.rangeDate; ? ? ? markDate = markDate.map((k) => { ? ? ? ? return timeUtil.dateFormat(k); ? ? ? }); ? ? ? rangeDate = rangeDate.map((k) => { ? ? ? ? return timeUtil.dateFormat(k); ? ? ? }); ? ? ? return [markDate, markDateMore, rangeDate]; ? ? }, ? ? // 日期表格的的樣式初始化 ? ? getList: function (date, chooseDay, isChosedDay = true) { ? ? ? console.log(date, chooseDay, "listCanshu", this.rangeDate); ? ? ? const [markDate, markDateMore, rangeDate] = this.forMatArgs(); // 標(biāo)簽 ? ? ? this.dateTop = `${date.getFullYear()}年${date.getMonth() + 1}月`; // 頂部的頭 ? ? ? let arr = timeUtil.getMonthList(this.myDate); // 獲取當(dāng)前日期的整個(gè)月份 ? ? ? for (let i = 0; i < arr.length; i++) { ? ? ? ? let markClassName = ""; ? ? ? ? let k = arr[i]; ? ? ? ? k.chooseDay = false; ? ? ? ? const nowTime = k.date; //當(dāng)前遍歷的哪個(gè)時(shí)間 ? ? ? ? const t = new Date(nowTime).getTime() / 1000; ? ? ? ? //看每一天的class ? ? ? ? for (const c of markDateMore) { ? ? ? ? ? if (c.date === nowTime) { ? ? ? ? ? ? markClassName = c.className || ""; ? ? ? ? ? } ? ? ? ? } ? ? ? ? //標(biāo)記選中某些天 設(shè)置class ? ? ? ? k.markClassName = markClassName; ? ? ? ? k.isMark = markDate.indexOf(nowTime) > -1; ? ? ? ? if (this.rangeDate) { ? ? ? ? ? k.isMark = rangeDate.indexOf(nowTime) > -1; ? ? ? ? } ? ? ? ? //無(wú)法選中某天 ? ? ? ? k.dayHide = t < this.agoDayHide || t > this.futureDayHide; ? ? ? ? if (k.isToday) { ? ? ? ? ? this.$emit("isToday", nowTime); ? ? ? ? } ? ? ? ? // if(this.rangeDate.length){ ? ? ? ? // ? if(timeUtil.dateFormat(moment(this.rangeDate[0]).format("YYYY-MM-DD"))===nowTime || timeUtil.dateFormat(moment(this.rangeDate[6]).format("YYYY-MM-DD"))===nowTime){ ? ? ? ? // ? ? k.chooseDay = true; ? ? ? ? // ? }else{ ? ? ? ? // ? ? ?k.chooseDay = ?false; ? ? ? ? // ? } ? ? ? ? // } ? ? ? ? var curDate = new Date(); ? ? ? ? var preDate = Date.parse( ? ? ? ? ? new Date(curDate.getTime() - 24 * 60 * 60 * 1000) ? ? ? ? ); //前一天 ? ? ? ? const preDay = timeUtil.dateFormat( ? ? ? ? ? moment(preDate).format("YYYY-MM-DD") ? ? ? ? ); ? ? ? ? // 處理默認(rèn)當(dāng)月的的前一天是被選中 ? ? ? ? if (nowTime === preDay && !chooseDay && !this.rangeDate.length) { ? ? ? ? ? k.chooseDay = true; ? ? ? ? } else { ? ? ? ? ? k.chooseDay = false; ? ? ? ? } ? ? ? ? let flag = !k.dayHide && k.otherMonth === "nowMonth"; ? ? ? ? if (chooseDay && chooseDay === nowTime && flag) { ? ? ? ? ? this.$emit("choseDay", nowTime); ? ? ? ? ? this.historyChose.push(nowTime); ? ? ? ? ? console.log(this.historyChose); ? ? ? ? ? if (this.rangeDate.length) { ? ? ? ? ? ? k.chooseDay = false; ? ? ? ? ? } else { ? ? ? ? ? ? k.chooseDay = true; ? ? ? ? ? } ? ? ? ? } else if ( ? ? ? ? ? this.historyChose[this.historyChose.length - 1] === nowTime && ? ? ? ? ? !chooseDay && ? ? ? ? ? flag ? ? ? ? ) { ? ? ? ? ? console.log("進(jìn)來(lái)這里了"); ? ? ? ? ? // 處理日月的切換 ? ? ? ? ? if (this.rangeDate.length) { ? ? ? ? ? ? k.chooseDay = false; ? ? ? ? ? } else { ? ? ? ? ? ? if (this.chooseDay) { ? ? ? ? ? ? ? k.chooseDay = true; ? ? ? ? ? ? } else { ? ? ? ? ? ? ? k.chooseDay = false; ? ? ? ? ? ? } ? ? ? ? ? } ? ? ? ? } ? ? ? } ? ? ? this.list = arr; ? ? }, ? }, ? mounted() { ? ? this.getList(this.myDate); ? }, ? watch: { ? ? rangeDate: { ? ? ? handler(val, oldVal) { ? ? ? ? this.getList(this.myDate); ? ? ? }, ? ? ? deep: true, ? ? }, ? ? markDate: { ? ? ? handler(val, oldVal) { ? ? ? ? this.getList(this.myDate); ? ? ? }, ? ? ? deep: true, ? ? }, ? ? markDateMore: { ? ? ? handler(val, oldVal) { ? ? ? ? this.getList(this.myDate); ? ? ? }, ? ? ? deep: true, ? ? }, ? ? agoDayHide: { ? ? ? handler(val, oldVal) { ? ? ? ? this.getList(this.myDate); ? ? ? }, ? ? ? deep: true, ? ? }, ? ? futureDayHide: { ? ? ? handler(val, oldVal) { ? ? ? ? this.getList(this.myDate); ? ? ? }, ? ? ? deep: true, ? ? }, ? ? sundayStart: { ? ? ? handler(val, oldVal) { ? ? ? ? this.intStart(); ? ? ? ? this.getList(this.myDate); ? ? ? }, ? ? ? deep: true, ? ? }, ? }, }; </script> <style scoped> @media screen and (min-width: 460px) { ? .wh_item_date:hover { ? ? background: #00baff; ? ? cursor: pointer; ? } } * { ? margin: 0; ? padding: 0; } .wh_container { ? max-width: 410px; ? margin: auto; } li { ? list-style-type: none; } .wh_top_changge { ? display: flex; } .wh_top_changge li { ? cursor: pointer; ? display: flex; ? color: #040b29; ? font-size: 18px; ? flex: 1; ? justify-content: center; ? align-items: center; ? height: 47px; } .wh_top_changge .wh_content_li { ? cursor: auto; ? flex: 2.5; } .wh_content_all { ? font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", ? ? "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif; ? background-color: #ffffff; ? width: 100%; ? overflow: hidden; ? padding-bottom: 8px; ? border-radius: 10px; } .wh_content { ? display: flex; ? flex-wrap: wrap; ? padding: 0 3% 0 3%; ? width: 100%; ? justify-content: center; } .wh_content:first-child .wh_content_item_tag, .wh_content:first-child .wh_content_item { ? color: #ddd; ? font-size: 16px; } .wh_content_item, .wh_content_item_tag { ? font-size: 15px; ? width: 13.4%; ? text-align: center; ? color: #fff; ? position: relative; } .wh_content_item { ? height: 40px; } .wh_top_tag { ? width: 40px; ? height: 40px; ? line-height: 40px; ? margin: auto; ? display: flex; ? justify-content: center; ? align-items: center; ? color: #9b9da9; } .wh_item_date { ? width: 40px; ? height: 40px; ? line-height: 40px; ? margin: auto; ? display: flex; ? justify-content: center; ? align-items: center; ? color: #040b29; } .wh_jiantou1 { ? width: 12px; ? height: 12px; ? border-top: 2px solid #9b9da9; ? border-left: 2px solid #9b9da9; ? transform: rotate(-45deg); } .wh_jiantou1:active, .wh_jiantou2:active { ? border-color: #040b29; } .wh_jiantou2 { ? width: 12px; ? height: 12px; ? border-top: 2px solid #9b9da9; ? border-right: 2px solid #9b9da9; ? transform: rotate(45deg); } .wh_content_item > .wh_isMark { ? margin: auto; ? /* border-radius:10px; */ ? background:rgba(235, 246, 255, 1); ? z-index: 2; } .wh_content_item .wh_other_dayhide { ? color: #bfbfbf; } .wh_content_item .wh_want_dayhide { ? color: #9b9da9; } .wh_content_item .wh_isToday { ? /* background: #00BAFF; ? border-radius:10px; */ ? color: rgba(130, 183, 225, 1); } .wh_content_item .wh_pre_day { ? color: red; } .wh_content_item .wh_chose_day { ? background: rgba(168, 208, 240, 1); ? color: #fff; ? border-radius: 10px; } </style>
calendar.js 是生成月份盤,月數(shù)多少天的邏輯
import moment from "moment"; export default { ? ? // 當(dāng)某月的天數(shù) ? ? getDaysInOneMonth(date) { ? ? ? const year = date.getFullYear(); ? ? ? const month = date.getMonth() + 1; ? ? ? const d = new Date(year, month, 0); ? ? ? return d.getDate(); ? ? }, ? ? // 向前空幾個(gè) ? ? getMonthweek(date) { ? ? ? const year = date.getFullYear(); ? ? ? const month = date.getMonth() + 1; ? ? ? const dateFirstOne = new Date(year + '/' + month + '/1'); ? ? ? return this.sundayStart ? ? ? ? ? dateFirstOne.getDay() == 0 ? 7 : dateFirstOne.getDay() : ? ? ? ? dateFirstOne.getDay() == 0 ? 6 : dateFirstOne.getDay() - 1; ? ? }, ? ? /** ? ? ?* 獲取當(dāng)前日期上個(gè)月或者下個(gè)月 ? ? */ ? ? getOtherMonth(date, str = 'nextMonth') { ? ? ? const timeArray = this.dateFormat(date).split('/'); ? ? ? const year = timeArray[0]; ? ? ? const month = timeArray[1]; ? ? ? const day = timeArray[2]; ? ? ? let year2 = year; ? ? ? let month2; ? ? ? if (str === 'nextMonth') { ? ? ? ? month2 = parseInt(month) + 1; ? ? ? ? if (month2 == 13) { ? ? ? ? ? year2 = parseInt(year2) + 1; ? ? ? ? ? month2 = 1; ? ? ? ? } ? ? ? } else { ? ? ? ? month2 = parseInt(month) - 1; ? ? ? ? if (month2 == 0) { ? ? ? ? ? year2 = parseInt(year2) - 1; ? ? ? ? ? month2 = 12; ? ? ? ? } ? ? ? } ? ? ? let day2 = day; ? ? ? const days2 = new Date(year2, month2, 0).getDate(); ? ? ? if (day2 > days2) { ? ? ? ? day2 = days2; ? ? ? } ? ? ? if (month2 < 10) { ? ? ? ? month2 = '0' + month2; ? ? ? } ? ? ? if (day2 < 10) { ? ? ? ? day2 = '0' + day2; ? ? ? } ? ? ? const t2 = year2 + '/' + month2 + '/' + day2; ? ? ? return new Date(t2); ? ? }, ? ? // 上個(gè)月末尾的一些日期 ? ? getLeftArr(date) { ? ? ? const arr = []; ? ? ? const leftNum = this.getMonthweek(date); ? ? ? const num = this.getDaysInOneMonth(this.getOtherMonth(date, 'preMonth')) - leftNum + 1; ? ? ? const preDate = this.getOtherMonth(date, 'preMonth'); ? ? ? // 上個(gè)月多少開始 ? ? ? for (let i = 0; i < leftNum; i++) { ? ? ? ? const nowTime = preDate.getFullYear() + '/' + (preDate.getMonth() + 1) + '/' + (num + i); ? ? ? ? arr.push({ ? ? ? ? ? id: num + i, ? ? ? ? ? date: nowTime, ? ? ? ? ? isToday: false, ? ? ? ? ? isPreDay:false, ? ? ? ? ? otherMonth: 'preMonth', ? ? ? ? }); ? ? ? } ? ? ? return arr; ? ? }, ? ? // 下個(gè)月末尾的一些日期 ? ? getRightArr(date) { ? ? ? const arr = []; ? ? ? const nextDate = this.getOtherMonth(date, 'nextMonth'); ? ? ? const leftLength = this.getDaysInOneMonth(date) + this.getMonthweek(date); ? ? ? const _length = 7 - leftLength % 7; ? ? ? for (let i = 0; i < _length; i++) { ? ? ? ? const nowTime = nextDate.getFullYear() + '/' + (nextDate.getMonth() + 1) + '/' + (i + 1); ? ? ? ? arr.push({ ? ? ? ? ? id: i + 1, ? ? ? ? ? date: nowTime, ? ? ? ? ? isToday: false, ? ? ? ? ? isPreDay:false, ? ? ? ? ? otherMonth: 'nextMonth', ? ? ? ? }); ? ? ? } ? ? ? return arr; ? ? }, ? ? // format日期 ? ? dateFormat(date) { ? ? ? date = typeof date === 'string' ? new Date(date.replace(/-/g, '/')) : date; ? ? ? return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' ? ? ? ? + date.getDate(); ? ? }, ? ? // 獲取某月的列表不包括上月和下月 ? ? getMonthListNoOther(date) { ? ? ? const arr = []; ? ? ? const num = this.getDaysInOneMonth(date); ? ? ? const year = date.getFullYear(); ? ? ? const month = date.getMonth() + 1; ? ? ? const toDay = this.dateFormat(new Date()); ? ? ? console.log(toDay,'今日日期的格式化'); ? ? ? var curDate = new Date(); ? ? ? var preDate = Date.parse(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)); //前一天 ? ? ? const preDay = this.dateFormat(moment(preDate).format('YYYY-MM-DD')); ? ? ? console.log(preDay,'前一日日期的格式化'); ? ? ? for (let i = 0; i < num; i++) { ? ? ? ? const nowTime = year + '/' + month + '/' + (i + 1); ? ? ? ? arr.push({ ? ? ? ? ? id: i + 1, ? ? ? ? ? date: nowTime, ? ? ? ? ? isToday: toDay === nowTime, ? ? ? ? ? isPreDay: false, ? ? ? ? ? otherMonth: 'nowMonth', ? ? ? ? }); ? ? ? } ? ? ? // console.log(arr,'月份日期') ? ? ? return arr; ? ? }, ? ?? ? ? // 獲取某月的列表 用于渲染 ? ? getMonthList(date) { ? ? ? return [ ...this.getLeftArr(date), ...this.getMonthListNoOther(date), ...this.getRightArr(date) ]; ? ? }, ? ? // 默認(rèn)是周一開始 ? ? sundayStart: false, ? };
組件的導(dǎo)出
// index.js import CalendarDemo from './calendar.vue'; export default CalendarDemo;
組件的使用
<template> ? <div style="background-color:#F7F7F7;padding:0.43rem"> ? ? <!-- <NewAppHeader title="行駛里程數(shù)據(jù)" :backGroundTrans="true" :hideGoback="true"> --> ? ? ? <NewAppHeader :title="DATA_FOREZEN.titleName[type]" :backGroundTrans="true" :hideGoback="true"> ? ? ? <span class="d_left" @click="back"></span> ? ? ? <span class="d_right" @click="showModal('demo')"></span> ? ? </NewAppHeader> ? ? <div class="d_main" style="padding-top:1rem"> ? ? ? <div class="v_tab"> ? ? ? ? <div class="tab_general" :class="tab == 1 ? 'tab_active' : ''" @click="changeTab(1)"> ? ? ? ? ? 日 ? ? ? ? </div> ? ? ? ? <div class="tab_general" :class="tab == 2 ? 'tab_active' : ''" @click="changeTab(2)"> ? ? ? ? ? 周 ? ? ? ? </div> ? ? ? </div> ? ? </div> ? ? <div style="margin-top:0.45rem;"> ? ? ? <div v-if="tab === 1"> ? ? ? ? <CalendarDemo ? ? ? ? ? ref="Calendar" ? ? ? ? ? @change="handelChange" ? ? ? ? ? v-on:changeMonth="changeDate" ? ? ? ? ? :defaultDate="defaultDate" ? ? ? ? ? :futureDayHide="disableDay" ? ? ? ? ? :sundayStart="sundayStart" ? ? ? ? ? :textTop="textTop" ? ? ? ? ></CalendarDemo> ? ? ? </div> ? ? ? <div v-else> ? ? ? ? <CalendarDemo ? ? ? ? ? ref="Calendar" ? ? ? ? ? v-on:choseDay="clickDay" ? ? ? ? ? v-on:changeMonth="changeDate" ? ? ? ? ? :defaultDate="defaultDate" ? ? ? ? ? :futureDayHide="disableDay" ? ? ? ? ? :markDate="markDate" ? ? ? ? ? :rangeDate="rangeDate" ? ? ? ? ? :sundayStart="sundayStart" ? ? ? ? ? :textTop="textTop" ? ? ? ? ></CalendarDemo> ? ? ? </div> ? ? </div> ? </div> </template> <script> import "@/utils/flexible.js"; const NewAppHeader = () => import("@/components/NewAppHeader"); import CalendarDemo from "./compnent/index"; import moment from "moment"; const DATA_FOREZEN = { ? titleName:{ ? ? voice:'語(yǔ)音控制數(shù)據(jù)', ? ? switch:'遠(yuǎn)程車控?cái)?shù)據(jù)', ? ? distance:'行駛里程數(shù)據(jù)' ? }, ? noDataTip:{ ? ? voice:'無(wú)語(yǔ)音控制數(shù)據(jù)', ? ? switch:'無(wú)遠(yuǎn)程車控?cái)?shù)據(jù)', ? ? distance:'無(wú)行駛里程數(shù)據(jù)' ? }, ? totoalTip:{ ? ? voice:'累計(jì)控制', ? ? switch:'累計(jì)使用遠(yuǎn)程車控', ? ? distance:'累計(jì)行駛' ? }, ? weekTotal:{ ? ? voice:'累計(jì)語(yǔ)音控制', ? ? switch:'遠(yuǎn)程車控?cái)?shù)據(jù)', ? ? distance:'累計(jì)行駛里程' ? }, ? noteC:{ ? ? voice:'每一段語(yǔ)音數(shù)據(jù)都有一段故事', ? ? switch:'新寶駿車控大玩家邀你來(lái)挑戰(zhàn)', ? ? distance:'每一段行駛里程都有一段故事' ? }, ? Company:{ ? ? voice:'次', ? ? distance:'KM', ? ? switch:'次' ? }, ? dateType:{ ? ? 1:'周', ? ? 2:'周' ? }, ? shareType:{ ? ? 1:'今日', ? ? 2:'本周' ? } } export default { ? data() { ? ? return { ? ? ? DATA_FOREZEN, ? ? ? sundayStart: true, ? ? ? textTop: ["日", "一", "二", "三", "四", "五", "六"], ? ? ? isWeek: true, ? ? ? tab: 1, ? ? ? defaultDate: Date.parse(new Date()), ? ? ? disableDay: "", ? ? ? markDate: [], ? ? ? rangeDate: [], ? ? ? weekList: [ ? ? ? ? { date: "1", num: "1" }, ? ? ? ? { date: "2", num: "2" }, ? ? ? ? { date: "3", num: "3" }, ? ? ? ? { date: "4", num: "4" }, ? ? ? ? { date: "5", num: "5" }, ? ? ? ? { date: "6", num: "6" }, ? ? ? ? { date: "7", num: "7" } ? ? ? ], //周里程的列表 ? ? ? lastList: [], ? ? }; ? }, ? components: { ? ? CalendarDemo, ? ? NewAppHeader ? }, ? filters: { ? ? filterDate(value) { ? ? ? return moment(value).format("MM月DD日"); ? ? } ? }, ? watch: { ? ? tab: { ? ? ? handler(val, oldVal) { ? ? ? ? console.log(val, oldVal); ? ? ? ? if (val == 2) { ? ? ? ? ? this.markDate = this.weekDay(); ? ? ? ? ? this.rangeDate = this.weekDay(); ? ? ? ? ? this.getData(); ? ? ? ? } ? ? ? }, ? ? ? deep: true ? ? } ? }, ? created() { ? ? // 時(shí)間今日之前的時(shí)間不可選 ? ? let today = moment().format("YYYY-MM-DD"); ? ? this.disableDay = (moment(today).valueOf() / 1000).toString(); ? ? // 處理前默認(rèn)前一天的邏輯 ? ? var curDate = new Date(); ? ? var preDate = Date.parse(new Date(curDate.getTime() - 24 * 60 * 60 * 1000)); //前一天 ? ? this.defaultDate = new Date(preDate); ? ? this.dateStr = moment(this.defaultDate).format("MM月DD日"); ? ? // 獲取行駛數(shù)據(jù) ? ? this.getData(); ? }, ? methods: { ? ? back() { ? ? ? this.$router.go(-1); ? ? }, ? ? // 切換日月 ? ? changeTab(arg) { ? ? ? this.tab = arg; ? ? ? this.getData(); ? ? }, ? ? weekDay(data) { ? ? ? if (data) { ? ? ? ? this.oToday = new Date(data); ? ? ? } else { ? ? ? ? this.oToday = new Date(); ? ? ? } ? ? ? let defaultDay = 2; ? ? ? console.log(data,'data') ? ? ? this.currentDay = this.oToday.getDay(); ?// 獲取當(dāng)前周幾 ? ? ? console.log(this.currentDay,'currentDay ') ? ? ? if (this.currentDay == 0) { ? ? ? ? this.currentDay = 7; ? ? ? } ? ? ? let distansDay = this.currentDay - defaultDay; ? ? ? let mondayTime = this.oToday.getTime() - distansDay * 24 * 60 * 60 * 1000; ? ? ? let sundayTime = this.oToday.getTime() + (6 - this.currentDay) * 24 * 60 * 60 * 1000; ? ? ? let arr = []; ? ? ? for (let i = 0; i < 7; i++) { ? ? ? ? arr.push( ? ? ? ? ? moment(mondayTime) ? ? ? ? ? ? .add("days", i) ? ? ? ? ? ? .format("YYYY-MM-DD") ? ? ? ? ); ? ? ? } ? ? ? console.log(arr) ? ? ? return arr; ? ? }, ? ? // 子組件的返回參數(shù) ? ? clickDay(data) { ? ? ? console.log(data, "時(shí)間"); ? ? ? if (this.tab == 2) { ? ? ? ? this.rangeDate = this.weekDay(data); ? ? ? ? this.getData(); ? ? ? } else { ? ? ? ? this.defaultDate = data; ? ? ? ? this.dateStr = moment(data).format("MM月DD日"); ? ? ? ? this.getData(); ? ? ? } ? ? }, ? ? // 接口數(shù)據(jù)請(qǐng)求 ? ? getData() { ? ? ?// ... 省略啦 ? ? }, ? ? changeDate(data) { ? ? ? console.log(data); //左右點(diǎn)擊切換月份 ? ? }, ? } }; </script> <style lang="less" scoped> /deep/ .mint-header-title { ? font-size: 0.48rem; ? color: #040b29; ? background-color: rgb(247, 247, 247); } // /deep/ .new-mt-header.trans{ // ? ?background-color: rgb(247, 247, 247); // } .d_left { ? position: fixed; ? padding: 0.25rem; ? top: 0.25rem; ? background-size: contain; ? background-repeat: no-repeat; ? background-position: center; ? left: 0.43rem; ? height: 0.44rem; ? width: 0.25rem; ? display: inline-block; ? background-image: url("./../../imgs/vInternet/d_back.png"); } .d_right { ? height: 0.5rem; ? width: 0.5rem; ? background-image: url("./../../imgs/vInternet/d_share.png"); ? display: inline-block; ? background-repeat: no-repeat; ? margin-right: 0.2rem; ? margin-top: 0.35rem; ? background-size: 100%; } .d_main { ? display: flex; ? justify-content: center; ? align-items: center; ? .v_tab { ? ? height: 0.93rem; ? ? width: 3.73rem; ? ? border-radius: 0.53rem; ? ? color: #040b29; ? ? background-color: #ffffff; ? ? display: inherit; ? ? align-items: center; ? ? justify-content: center; ? ? font-size: 0.43rem; ? ? .tab_general { ? ? ? width: 1.87rem; ? ? ? border-radius: 0.53rem; ? ? ? height: 0.93rem; ? ? ? line-height: 0.93rem; ? ? ? text-align: center; ? ? } ? ? .tab_active { ? ? ? background: rgba(235, 246, 255, 1); ? ? } ? } } .d_note { ? height: 0.59rem; ? font-size: 0.51rem; ? font-family: Helvetica; ? color: rgba(4, 11, 41, 1); ? line-height: 0.59rem; ? margin: 0.41rem 0rem; ? font-style: italic; ? ? font-weight: 600; } } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)父子組件雙向綁定的方法總結(jié)
Vue.js 是一種流行的 JavaScript 框架,它提供了一種簡(jiǎn)單且高效的方式來(lái)構(gòu)建用戶界面,在 Vue 中,父子組件之間的雙向綁定是一種常見的需求,下面我們就來(lái)學(xué)習(xí)一下vue中父子組件雙向綁定的常用方法吧2023-10-10詳解element-ui動(dòng)態(tài)限定的日期范圍選擇器代碼片段
這篇文章主要介紹了element-ui動(dòng)態(tài)限定的日期范圍選擇器代碼片段,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉的示例代碼
本文主要介紹了vue+axios實(shí)現(xiàn)圖片上傳識(shí)別人臉,這里采用的是vant的文件上傳組件,通過上傳圖片后端識(shí)別圖片里的人臉,感興趣的可以了解一下2021-11-11關(guān)于ElementUI自定義Table支持render
這篇文章主要介紹了關(guān)于ElementUI自定義Table支持render,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程
這篇文章主要為大家介紹了VueX學(xué)習(xí)之modules和namespacedVueX詳細(xì)教程,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題
這篇文章主要介紹了解決Echarts2豎直datazoom滑動(dòng)后顯示數(shù)據(jù)不全的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2020-07-07element-ui循環(huán)顯示radio控件信息的方法
今天小編就為大家分享一篇element-ui循環(huán)顯示radio控件信息的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-08-08vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中各屬性的詳解
這篇文章主要介紹了vue中的watch監(jiān)聽數(shù)據(jù)變化及watch中的immediate、handler和deep屬性詳解,本文大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2018-09-09