vue實現(xiàn)簽到日歷效果
更新時間：2022年08月29日 09:20:51 作者：zqhs5599
這篇文章主要為大家詳細介紹了vue實現(xiàn)簽到日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)簽到日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
先看看我們的效果圖：
一、頁面部分：
<template>
? <div class="test-page">
? ? <div class="top">
? ? ? <div class="button" v-if="!sign" @click="Sign">
? ? ? ? <i class="calendar-icon"></i>
? ? ? ? <div>去簽到</div>
? ? ? </div>
? ? ? <div class="button" v-if="sign">
? ? ? ? <i class="calendar-icon"></i>
? ? ? ? <div>已簽到</div>
? ? ? </div>
? ? ? <div>已連續(xù)簽到{{day}}天，繼續(xù)加油!</div>
? ? </div>
? ? <div class="content">
? ? ? <!-- 年份 月份 -->
? ? ? <ul class="month bottom-line">
? ? ? ? <!--點擊會觸發(fā)pickpre函數(shù)，重新刷新當前日期 -->
? ? ? ? <li class="arrow" @click="pickPre(currentYear,currentMonth)"><van-icon name="arrow-left"/> 上個月</li>
? ? ? ? <li class="year-month">
? ? ? ? ? <span>{{ currentYear }}-{{ currentMonth }}</span>
? ? ? ? </li>
? ? ? ? <li class="arrow" @click="pickNext(currentYear,currentMonth)">下個月 <van-icon name="arrow"/></li>
? ? ? </ul>
? ? ? <!-- 星期 -->
? ? ? <ul class="weekdays">
? ? ? ? <li>日</li>
? ? ? ? <li>一</li>
? ? ? ? <li>二</li>
? ? ? ? <li>三</li>
? ? ? ? <li>四</li>
? ? ? ? <li>五</li>
? ? ? ? <li>六</li>
? ? ? </ul>
? ? ? <!-- 日期 -->
? ? ? <ul class="days bottom-line">
? ? ? ? <li ?v-for="day in days">
? ? ? ? ? <!--本月已簽到日期-->
? ? ? ? ? <span v-if="day.isSign && day.day.getMonth()+1 === currentMonth" class="cli">
? ? ? ? ? ? <img src="/static/images/calendar-sign-icon.png">
? ? ? ? ? ? {{ day.day.getDate() }}
? ? ? ? ? </span>
? ? ? ? ? <!--本月未簽到日期-->
? ? ? ? ? <span v-if="!day.isSign && day.day.getMonth()+1 === currentMonth" class="cli">{{ day.day.getDate() }}</span>
? ? ? ? </li>
? ? ? </ul>
? ? </div>
? ? <div class="role">
? ? ? <div class="role-title">簽到規(guī)則</div>
? ? ? <div class="role-content" v-html="role ? role : '暫無內(nèi)容'"></div>
? ? </div>
? </div>
</template>
<script>
import index from './index';
export default index;
</script>
<style lang="less" scoped>
@import './index';
</style>二、js部分：
import { Cell, CellGroup, Field, Popup, Button, Icon } from 'vant';
export default {
? components: {
? ? [Cell.name]: Cell,
? ? [CellGroup.name]: CellGroup,
? ? [Field.name]: Field,
? ? [Popup.name]: Popup,
? ? [Button.name]: Button,
? ? [Icon.name]: Icon
? },
? data() {
? ? return {
? ? ? currentDay: 1, // 當前天
? ? ? currentMonth: 1, // 當前月
? ? ? currentYear: 1970,
? ? ? currentWeek: 1, // 一號所在的星期
? ? ? days: [], // 當月所有天數(shù)
? ? ? content: {},
? ? ? arrDate: [], // 當月簽到日期
? ? ? num: 0,
? ? ? day: 10,
? ? ? sign: false,
? ? ? role: '<p>每天簽到可獲得5個能量</p>'
? ? };
? },
? created() {
? ? this.getSign();
? },
? methods: {
? ? /**
? ? ?* 獲取簽到日期
? ? ?*/
? ? getSign() {
? ? ? // 接口未完成，模擬數(shù)據(jù)
? ? ? const sign_days = [
? ? ? ? { day: 5 }, { day: 1 }, { day: 2 }, { day: 3 }, { day: 4 }, { day: 6 }, { day: 7 }, { day: 8 }, { day: 9 }, { day: 10 }
? ? ? ];
? ? ? for (const i in sign_days) {
? ? ? ? this.arrDate.push(sign_days[i].day);
? ? ? }
? ? ? this.initData(null);
? ? },
? ? initData(cur) {
? ? ? let date;
? ? ? if (cur) { // 切換日期
? ? ? ? date = new Date(cur);
? ? ? } else {
? ? ? ? var now = new Date();
? ? ? ? var d = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
? ? ? ? d.setDate(35);// 設(shè)置天數(shù)為35天
? ? ? ? date = new Date(this.formatDate(d.getFullYear(), d.getMonth(), 1));
? ? ? }
? ? ? this.currentDay = date.getDate(); // 今日日期 幾號
? ? ? this.currentYear = date.getFullYear(); // 當前年份
? ? ? this.currentMonth = date.getMonth() + 1; // 當前月份
? ? ? this.currentWeek = date.getDay(); // 0,1...6 星期
? ? ? const str = this.formatDate(this.currentYear, this.currentMonth, this.currentDay); // 2020-01-01
? ? ? this.days.length = 0; // 初始化日期
? ? ? // 如果今天是周日，放在第一行第7個位置，前面6個 這里默認顯示一周，如果需要顯示一個月，則第二個循環(huán)為 i<= 35- this.currentWeek
? ? ? for (var i = this.currentWeek; i > 0; i--) {
? ? ? ? const d = new Date(str);
? ? ? ? d.setDate(d.getDate() - i);
? ? ? ? var dayobject = {}; // 用一個對象包裝Date對象 ?以便為以后預(yù)定功能添加屬性
? ? ? ? dayobject.day = d;
? ? ? ? this.days.push(dayobject); // 將日期放入data 中的days數(shù)組 供頁面渲染使用
? ? ? }
? ? ? // 其他周 // 設(shè)置天數(shù)為35天,周日設(shè)置在第一位，循環(huán)從36開始
? ? ? this.num = 0;
? ? ? for (var j = 0; j <= 36 - this.currentWeek; j++) {
? ? ? ? const d = new Date(str);
? ? ? ? d.setDate(d.getDate() + j);
? ? ? ? const dddd = d.getDate();
? ? ? ? if (dddd === 1) {
? ? ? ? ? this.num++;
? ? ? ? }
? ? ? ? if (this.num === 2) {
? ? ? ? ? return;
? ? ? ? }
? ? ? ? const dayobject = { day: d, isSign: this.isVerDate(dddd) };
? ? ? ? this.days.push(dayobject);
? ? ? }
? ? },
? ? /**
? ? ?* 判斷該日期是否有簽到
? ? ?* @param v
? ? ?* @returns {boolean}
? ? ?*/
? ? isVerDate(v) {
? ? ? return this.arrDate.includes(v);
? ? },
? ? /**
? ? ?* 上一月
? ? ?* @param year
? ? ?* @param month
? ? ?*/
? ? pickPre(year, month) {
? ? ? const d = new Date(this.formatDate(year, month, 1));
? ? ? d.setDate(0);
? ? ? this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
? ? },
? ? /**
? ? ?* 下一月
? ? ?* @param year
? ? ?* @param month
? ? ?*/
? ? pickNext(year, month) {
? ? ? const d = new Date(this.formatDate(year, month, 1));
? ? ? d.setDate(35);
? ? ? this.initData(this.formatDate(d.getFullYear(), d.getMonth() + 1, 1));
? ? },
? ? // 返回 類似 2020-01-01 格式的字符串
? ? formatDate(year, month, day) {
? ? ? month < 10 && (month = '0' + month);
? ? ? day < 10 && (day = '0' + day);
? ? ? const data = year + '-' + month + '-' + day;
? ? ? return data;
? ? },
? ? /**
? ? ?* 點擊簽到
? ? ?* @param index
? ? ?*/
? ? Sign() {
? ? ? const now = new Date();
? ? ? this.arrDate.push(now.getDate());
? ? ? this.initData();
? ? ? this.sign = true;
? ? ? // 接口待完成，虛擬提示
? ? ? this.$fn.success('簽到成功');
? ? }
? }
};三、CSS部分：
.test-page {
? .top {
? ? background: url('/static/images/user-bg-img.jpg') no-repeat 0 0;
? ? background-size: 100% 100%;
? ? overflow: hidden;
? ? color: #ffffff;
? ? padding: 15px;
? ? height: 120px;
? ? text-align: center;
? ? .button {
? ? ? display: flex;
? ? ? justify-content: center;
? ? ? border: 1px solid #ffffff;
? ? ? border-radius: 20px;
? ? ? color: #ffffff;
? ? ? font-size: 18px;
? ? ? width: 120px;
? ? ? margin: 0 auto 10px;
? ? ? height: 40px;
? ? ? line-height: 40px;
? ? ? .calendar-icon {
? ? ? ? display: block;
? ? ? ? width: 40px;
? ? ? ? height: 40px;
? ? ? ? background: url(/static/images/calendar-icon.png) no-repeat -6px -4px;
? ? ? ? background-size: 114px 45px;
? ? ? }
? ? }
? ? .button:active {
? ? ? background-color: #5283c4;
? ? ? opacity: 0.8;
? ? }
? }
? .content {
? ? margin: 0 15px;
? ? border-radius: 8px;
? ? overflow: hidden;
? ? margin-top: -40px;
? ? box-shadow: rgba(225,225,225,0.7) 0 ?10px 20px 0;
? }
? .month {
? ? background: #ffffff;
? ? margin: 0;
? ? padding: 10px 15px;
? ? display: flex;
? ? justify-content: space-between;
? ? li {
? ? ? text-transform: uppercase;
? ? ? letter-spacing: 0;
? ? }
? ? .arrow {
? ? ? color: #5283c4;
? ? ? font-size: 12px;
? ? ? i {
? ? ? ? font-size: 13px;
? ? ? ? top: 2px;
? ? ? }
? ? }
? ? .year-month { font-size: 17px; }
? }
? .weekdays { /*頭部星期*/
? ? margin: 0;
? ? padding: 10px 0;
? ? background-color: #ffffff;
? ? display: flex;
? ? flex-wrap: wrap;
? ? justify-content: space-around;
? ? li {
? ? ? display: inline-block;
? ? ? text-align: center;
? ? }
? }
? .days { /*日期*/
? ? padding: 0 0 10px;
? ? background: #FFFFFF;
? ? margin: 0;
? ? display: flex;
? ? flex-wrap: wrap;
? ? align-items: center;
? ? justify-content: flex-start;
? ? li {
? ? ? list-style-type: none;
? ? ? width: 14.2%;
? ? ? padding: 1%;
? ? ? box-sizing: border-box;
? ? ? height: 40px;
? ? ? margin-bottom: 4px;
? ? ? text-align: center;
? ? ? color: #000;
? ? ? .cli {
? ? ? ? position: relative;
? ? ? ? width: 100%;
? ? ? ? height: 40px;
? ? ? ? display: flex;
? ? ? ? align-items: center;
? ? ? ? justify-content: center;
? ? ? ? img {/*簽到的日期*/
? ? ? ? ? height: 40px;
? ? ? ? ? position: absolute;
? ? ? ? }
? ? ? }
? ? }
? }
? .role {
? ? padding: 20px 15px;
? ? .role-title {
? ? ? margin-bottom: 5px;
? ? ? font-weight: bold;
? ? }
? ? .role-content {
? ? ? font-size: 13px;
? ? ? color: #333333;
? ? }
? }
}簽到效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue3配置Element及element-plus/lib/theme-chalk/index.css報錯的解決
這篇文章主要介紹了vue3配置Element及element-plus/lib/theme-chalk/index.css報錯的解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vue+Spring Boot簡單用戶登錄，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
這篇文章主要為大家詳細介紹了Vue+penlayers實現(xiàn)多邊形繪制及展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
Vue?的核心功能之一在于?props?的使用,props?是我們在?Vue?中從父組件到子組件傳遞數(shù)據(jù)的方式,但并非所有?props?都是一樣的,本文我們會深入學(xué)習(xí)這三種不同類型的?props,看看它們有何不同,以及何時使用它們,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了Vue中的反向代理，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
詳解Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)
本篇文章主要介紹了Vue.js之視圖和數(shù)據(jù)的雙向綁定(v-model)，使用v-model指令,使得視圖和數(shù)據(jù)實現(xiàn)雙向綁定，有興趣的可以了解一下2017-06-06
最近小編接到一個項目pc端和移動端是兩個獨立的項目，兩個項目項目中的內(nèi)容基本相同，鏈接組合的方式都有規(guī)律可循，接到的需求便是在移動端訪問pc端的URL連接時，重定向至移動端對應(yīng)頁面，下面小編給大家分享實現(xiàn)過程，一起看看吧2021-11-11
解決vue2 在mounted函數(shù)無法獲取prop中的變量問題
這篇文章主要介紹了vue2 在mounted函數(shù)無法獲取prop中的變量的解決方法 ,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
el-input限制輸入正整數(shù)的兩種實現(xiàn)方式
el-input框是Element UI庫中的一個輸入框組件，用于接收用戶的輸入，這篇文章主要介紹了el-input限制輸入正整數(shù),需要的朋友可以參考下2024-02-02