vue日歷組件的封裝方法
更新時(shí)間：2022年03月08日 11:45:56 作者：面壁思過(guò)程
這篇文章主要為大家詳細(xì)介紹了vue封裝一個(gè)日歷組件的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue日歷組件的封裝代碼，供大家參考，具體內(nèi)容如下
圖示
封裝的組件的代碼如下
<template>
? <div class="calendar">
? ? <!-- 選擇日歷的彈出層 -->
? ? <div class="model_mask" v-show="showtimemask" @click="showmask1()">
? ? </div>
? ? <div class="bouncedBox" v-show="showtimemask">
? ? ? <div class="mobile-top">
? ? ? ? <div class="sel-time">
? ? ? ? ? <p>開(kāi)始時(shí)間</p>
? ? ? ? ? <p class="start-date">{{starttime.substring(0,4)+'-'+starttime.substring(4,6)+'-'+starttime.substring(6,8)}}
? ? ? ? ? </p>
? ? ? ? </div>
? ? ? ? <div class="unsel-time">
? ? ? ? ? <p>結(jié)束時(shí)間</p>
? ? ? ? ? <p class="end-date">
? ? ? ? ? ? {{endtime==''?'請(qǐng)選擇結(jié)束日期':endtime.substring(0,4)+'-'+endtime.substring(4,6)+'-'+endtime.substring(6,8)}}</p>
? ? ? ? </div>
? ? ? </div>
?
? ? ? <div class="title">
? ? ? ? <div class="btn" @click.stop="last()" :class="(month<=nowmonth)&&(Year<=nowYear)?'noclick':'' ">上一月</div>
? ? ? ? <div class="text">{{Year}}年{{month}}月</div>
? ? ? ? <div class="btn" @click.stop="next()">下一月</div>
? ? ? </div>
?
? ? ? <div class="head">
? ? ? ? <div class="days" v-for="(item,index) in ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']" :key="index">
? ? ? ? ? {{item}}
? ? ? ? </div>
? ? ? </div>
?
? ? ? <div class="wrap">
? ? ? ? <div class="span" v-for="(item,index) in calendarList" :key="index" @click.stop="click(item.count)" :class="item==''?'kong'
? ? ? :item.count<nowtime?'noclick'
? ? ? :(item.count>=starttime&&item.count<=endtime)||item.count==starttime?'active':''">
? ? ? ? ? {{item.value}}
? ? ? ? </div>
? ? ? </div>
?
? ? ? <div class="bottombtn">
? ? ? ? <button class="cancle-btn" @click.stop='cancle()'>取消</button>
? ? ? ? <button class="sure-btn" @click.stop='firm()'>確定</button>
? ? ? </div>
?
? ? </div>
? </div>
</template>
?
<script>
? export default {
? ? name: "Calendar",
? ? data() {
? ? ? return {
? ? ? ? showtimemask:false,
? ? ? ? Puton_time: '', //投放日期 ?默認(rèn)今日 展示
? ? ? ? Puton_Start:'', ?//為了保存投放開(kāi)始結(jié)束的日期 ?用來(lái)點(diǎn)擊取消按鈕時(shí)初始化選中的值
? ? ? ? Puton_End:'',
? ? ? ? nowtime: '', //當(dāng)前日期的時(shí)間-----20190203格式 ?用于比較
? ? ? ? clickitem: '', //保存每次點(diǎn)擊的時(shí)間-----20190203格式 ?用于比較
? ? ? ? clickcount: 0, //點(diǎn)擊次數(shù)-------判斷開(kāi)始時(shí)間還是結(jié)束時(shí)間
? ? ? ? starttime: '', //開(kāi)始時(shí)間 ?數(shù)字 ? 默認(rèn)當(dāng)天日期
? ? ? ? endtime: '', //結(jié)束時(shí)間 ?數(shù)字 ? 默認(rèn)當(dāng)天日期
? ? ? ? Year: new Date().getFullYear(), //日歷上的年份 ? ----動(dòng)態(tài)改變的
? ? ? ? month: new Date().getMonth() + 1, //日歷上的月份 ---- ?動(dòng)態(tài)改變的
? ? ? ? Day: new Date().getDate(), //日歷上的天份 ? ? ? ? ----- 動(dòng)態(tài)改變的
?
? ? ? ? nowYear: new Date().getFullYear(),
? ? ? ? nowmonth: new Date().getMonth() + 1,
? ? ? ? nowDay: new Date().getDate(),
? ? ? ? calendarList: [],
? ? ? };
? ? },
?
? ? created() {
? ? ? //關(guān)于日歷的操作開(kāi)始
? ? ? this.Draw(this.nowYear, this.nowmonth);
?
? ? ? let time_month = this.nowmonth; //現(xiàn)在的月份
? ? ? let time_day = this.nowDay; //現(xiàn)在的天數(shù)
? ? ? if (this.nowmonth < 10) {
? ? ? ? time_month = 0 + '' + this.nowmonth;
? ? ? }
? ? ? if (this.nowDay < 10) {
? ? ? ? time_day = 0 + '' + this.nowDay;
? ? ? }
?
? ? ? this.nowtime = this.nowYear + '' + time_month + '' + time_day;
? ? ? this.starttime = this.nowtime;
? ? ? this.endtime = this.nowtime;
?
? ? ? this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime
? ? ? ? .substring(6, 8) + '至今';
?
? ? ? ? this.Puton_Start = this.nowtime,
? ? ? ? this.Puton_End = this.nowtime,
?
?
? ? ? ? this.$emit('str',this.Puton_time)
?
? ? ? //關(guān)于日歷的操作結(jié)束
? ? },
? ? mounted() {
?
? ? },
? ? methods: {
? ? ? showmask1() {
? ? ? ? if (this.showtimemask == true) {
? ? ? ? ? // this.showtimemask=false; ? //隱藏彈框
? ? ? ? ? this.cancle();
? ? ? ? } else {
? ? ? ? ? this.showtimemask = true; ?//顯示彈框
? ? ? ? }
? ? ? },
?
? ? ? Draw: function (Year, Month) {
? ? ? ? //日期列表
? ? ? ? var calendar = [];
?
? ? ? ? //用當(dāng)月第一天在一周中的日期值作為當(dāng)月離第一天的天數(shù)(獲取當(dāng)月第一天是周幾)
? ? ? ? for (var i = 1, firstDay = new Date(Year, Month - 1, 1).getDay(); i <= firstDay; i++) {
? ? ? ? ? calendar.push("");
? ? ? ? }
?
? ? ? ? //用當(dāng)月最后一天在一個(gè)月中的日期值作為當(dāng)月的天數(shù)
? ? ? ? for (var i = 1, monthDay = new Date(Year, Month, 0).getDate(); i <= monthDay; i++) {
?
? ? ? ? ? let time_month = Month;
? ? ? ? ? let time_day = i;
? ? ? ? ? if (Month < 10) {
? ? ? ? ? ? time_month = 0 + '' + Month;
? ? ? ? ? }
? ? ? ? ? if (i < 10) {
? ? ? ? ? ? time_day = 0 + '' + i;
? ? ? ? ? }
?
? ? ? ? ? calendar.push({
? ? ? ? ? ? value: i,
? ? ? ? ? ? count: Year + '' + time_month + '' + time_day
? ? ? ? ? })
? ? ? ? }
? ? ? ? this.calendarList = calendar;
? ? ? ? console.log(calendar)
? ? ? },
?
? ? ? last() {
? ? ? ? this.month--;
? ? ? ? if (this.month == 0) {
? ? ? ? ? this.month = 12;
? ? ? ? ? this.Year--;
? ? ? ? }
?
? ? ? ? this.Draw(this.Year, this.month);
? ? ? },
?
? ? ? next() {
? ? ? ? this.month++;
? ? ? ? if (this.month == 13) {
? ? ? ? ? this.month = 1;
? ? ? ? ? this.Year++;
? ? ? ? }
?
? ? ? ? this.Draw(this.Year, this.month);
? ? ? },
?
? ? ? click(item) {
? ? ? ? this.clickcount++;
? ? ? ? this.clickitem = item;
? ? ? ? //開(kāi)始日期
? ? ? ? if (this.clickcount % 2 == 1) {
? ? ? ? ? this.starttime = this.clickitem;
? ? ? ? ? this.endtime = ''
? ? ? ? } else {
? ? ? ? ? this.endtime = this.clickitem;
? ? ? ? ? if (this.starttime > this.endtime) {
? ? ? ? ? ? this.endtime = this.starttime;
? ? ? ? ? ? this.starttime = this.clickitem;
? ? ? ? ? }
? ? ? ? }
? ? ? },
?
? ? ? firm() {
? ? ? ? this.showtimemask = false;
? ? ? ? //當(dāng)選擇的開(kāi)始時(shí)間與結(jié)束時(shí)間相同時(shí) ? 顯示為2019-07-19當(dāng)天
? ? ? ? if (this.starttime == this.endtime) {
? ? ? ? ? this.Puton_Start = this.starttime,
? ? ? ? ? this.Puton_End = this.endtime,
?
? ? ? ? ? this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime
? ? ? ? ? ? .substring(6, 8) + '當(dāng)天';
?
? ? ? ? ? ? this.$emit('str',this.Puton_time);
?
? ? ? ? ? ? //否則顯示xxx 至 ? xxx
? ? ? ? } else {
?
? ? ? ? ? this.Puton_Start = this.starttime,
? ? ? ? ? this.Puton_End = this.endtime,
? ? ? ? ? this.Puton_time =
? ? ? ? ? ? this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime.substring(6,
? ? ? ? ? ? 8) +
? ? ? ? ? ? '至' + this.endtime.substring(0, 4) + '-' + this.endtime.substring(4, 6) + '-' + this.endtime.substring(6, 8);
?
? ? ? ? ? ? ?
?
? ? ? ? ? ? this.$emit('str',this.Puton_time)
? ? ? ? }
?
? ? ? },
? ? ? // 取消按鈕
? ? ? cancle() {
? ? ? ? this.showtimemask = false;?
? ? ? ? //當(dāng)按取消按鈕時(shí) ? 彈框中選中的區(qū)域等于上一次選中的區(qū)域
? ? ? ? this.starttime = this.Puton_Start;
? ? ? ? this.endtime = this.Puton_End;
? ? ? ? // this.Puton_time = this.starttime.substring(0, 4) + '-' + this.starttime.substring(4, 6) + '-' + this.starttime
? ? ? ? // ? .substring(6, 8) + '至今';
?
? ? ? ? // ? this.$emit('str',this.Puton_time)
? ? ? }
? ? }
? };
?
</script>
?
<style scoped lang="scss">
? @import "../common/common.css";
?
? // 日歷的樣式
? .model_mask {
? ? position: fixed;
? ? top: 0;
? ? bottom: 0;
? ? left: 0;
? ? right: 0;
? ? background: rgba($color: #000000, $alpha: 0.5);
? }
?
? .bouncedBox {
? ? position: fixed;
? ? background: #fff;
? ? bottom: 0;
? ? left: 0;
? ? right: 0;
?
? ? //開(kāi)始結(jié)束日期的顯示
? ? .mobile-top {
? ? ? display: flex;
? ? ? flex-wrap: nowrap;
? ? ? background: #fff;
? ? ? padding: 0.1rem 0;
?
? ? ? .sel-time {
? ? ? ? text-align: center;
? ? ? ? width: 50%;
?
? ? ? ? // border-bottom: solid 2px #2a81e8;
? ? ? ? .start-date {
? ? ? ? ? color: #b1b1b1;
? ? ? ? ? margin-top: 0.05rem;
? ? ? ? }
? ? ? }
?
? ? ? .unsel-time {
? ? ? ? text-align: center;
? ? ? ? width: 50%;
?
? ? ? ? .end-date {
? ? ? ? ? color: #b1b1b1;
? ? ? ? ? margin-top: 0.05rem;
? ? ? ? }
? ? ? }
? ? }
?
? ? // 左右選擇月份 ?顯示當(dāng)前年月
? ? .title {
? ? ? width: 100%;
? ? ? height: 40px;
? ? ? background-color: #60a7e8;
? ? ? display: flex;
? ? ? flex-wrap: nowrap;
? ? ? text-align: center;
? ? ? color: #fff;
? ? ? font-weight: bold;
? ? ? line-height: 40px;
?
? ? ? .btn {
? ? ? ? width: 1.2rem;
?
? ? ? ? &.noclick {
? ? ? ? ? pointer-events: none;
? ? ? ? ? background: #ccc;
? ? ? ? }
? ? ? }
?
? ? ? .text {
? ? ? ? flex: 1;
? ? ? }
? ? }
?
? ? //表頭 ?周1到周天的顯示
? ? .head {
? ? ? display: flex;
? ? ? flex-wrap: nowrap;
? ? ? text-align: center;
? ? ? height: 40px;
? ? ? line-height: 40px;
?
? ? ? .days {
? ? ? ? flex: 1;
? ? ? }
? ? }
?
? ? //日歷表區(qū)域
? ? .wrap {
? ? ? width: 7.5rem;
? ? ? height: auto;
? ? ? overflow: hidden;
? ? ? padding-bottom: 1rem;
?
? ? ? .span {
? ? ? ? width: 1.07142rem;
? ? ? ? height: 0.6rem;
? ? ? ? background: #fff;
? ? ? ? color: #337ab7;
? ? ? ? float: left;
? ? ? ? text-align: center;
? ? ? ? line-height: 0.6rem;
?
? ? ? ? &.active {
? ? ? ? ? background: #037ef5;
? ? ? ? ? color: #fff;
? ? ? ? }
?
? ? ? ? &.noclick {
? ? ? ? ? pointer-events: none;
? ? ? ? ? background: #ccc;
? ? ? ? }
?
? ? ? ? &.kong {
? ? ? ? ? background: #fff;
? ? ? ? ? pointer-events: none;
? ? ? ? }
? ? ? }
? ? }
?
? ? //底部按鈕區(qū)域
? ? .bottombtn {
? ? ? height: 40px;
? ? ? width: 100%;
? ? ? display: flex;
? ? ? flex-wrap: nowrap;
?
? ? ? button {
? ? ? ? flex: 1;
? ? ? }
?
? ? ? .sure-btn {
? ? ? ? background: #037ef5;
?
? ? ? ? color: #fff;
? ? ? }
? ? }
?
? }
?
</style>使用方法
main,js引入 全局注冊(cè)組件
import Calendar from './components/fz_zujian/Calendar.vue' ? ?//日歷組件
Vue.component('Calendar',Calendar)頁(yè)面使用
<div class="" @click="showmodel()">{{str}}</div>
?
<Calendar ref="chi1" v-on:str="getChild"></Calendar>
?
?data() {
? ? ? return {
? ? ? ? str: '',
? ? ? }
? }
?
?showmodel(){
? ? ? ? this.$refs.chi1.showmask1()
? ? ? },
?
? ? ? getChild(val) {
? ? ? ? this.str = val
? ? ? },以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue分頁(yè)查詢?cè)趺磳?shí)現(xiàn)，使用vue實(shí)現(xiàn)分頁(yè)的邏輯并不復(fù)雜，接收后端傳輸過(guò)來(lái)的數(shù)據(jù)，然后根據(jù)數(shù)據(jù)的總數(shù)和每一頁(yè)的數(shù)據(jù)量就可以計(jì)算出一共可以分成幾頁(yè)2023-04-04
vue 修改 data 數(shù)據(jù)問(wèn)題并實(shí)時(shí)顯示的方法
今天小編就為大家分享一篇vue 修改 data 數(shù)據(jù)問(wèn)題并實(shí)時(shí)顯示的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue3 Element-plus el-menu無(wú)限級(jí)菜單組件封裝過(guò)程
對(duì)于element中提供給我們的el-menu組件最多可以實(shí)現(xiàn)三層嵌套，如果多一層數(shù)據(jù)只能自己通過(guò)變量去加一層，如果加了兩層、三層這種往往是行不通的，所以只能進(jìn)行封裝，這篇文章主要介紹了Vue3 Element-plus el-menu無(wú)限級(jí)菜單組件封裝,需要的朋友可以參考下2023-04-04
vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮
這篇文章主要給大家介紹了關(guān)于vue3項(xiàng)目vite.config.js配置代理、端口、打包名以及圖片壓縮的相關(guān)資料,因?yàn)?.0版本中vue已經(jīng)內(nèi)置了很多關(guān)于webpack的配置,一般情況下開(kāi)箱即用,需要修改則可以在vue.config.js文件中完成,需要的朋友可以參考下
2023-12-12 
今天小編就為大家分享一篇關(guān)于vue-router重定向和路由別名的使用講解，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01 
Vant?如何修改van-collapse-item右側(cè)圖標(biāo)
這篇文章主要介紹了Vant?如何修改van-collapse-item右側(cè)圖標(biāo)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04 
所謂虛擬DOM就是為了解決瀏覽器性能問(wèn)題而被設(shè)計(jì)出來(lái)的。如前，若一次操作中有 10 次更新 這篇文章主要給大家介紹了關(guān)于Vue源碼分析之虛擬DOM的相關(guān)資料,需要的朋友可以參考下
2021-05-05 
vue打開(kāi)新窗口并實(shí)現(xiàn)傳參的圖文實(shí)例
這篇文章主要給大家介紹了關(guān)于vue打開(kāi)新窗口并實(shí)現(xiàn)傳參的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03 
vue2.0 watch里面的 deep和immediate用法說(shuō)明
這篇文章主要介紹了vue2.0 watch里面的 deep和immediate用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10