vue實(shí)現(xiàn)簽到日歷效果
更新時(shí)間：2022年08月29日 09:20:51 作者：zqhs5599
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簽到日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了vue實(shí)現(xiàn)簽到日歷效果的具體代碼，供大家參考，具體內(nèi)容如下
先看看我們的效果圖：
一、頁(yè)面部分：
<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">
? ? ? ? <!--點(diǎn)擊會(huì)觸發(fā)pickpre函數(shù)，重新刷新當(dāng)前日期 -->
? ? ? ? <li class="arrow" @click="pickPre(currentYear,currentMonth)"><van-icon name="arrow-left"/> 上個(gè)月</li>
? ? ? ? <li class="year-month">
? ? ? ? ? <span>{{ currentYear }}-{{ currentMonth }}</span>
? ? ? ? </li>
? ? ? ? <li class="arrow" @click="pickNext(currentYear,currentMonth)">下個(gè)月 <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 : '暫無(wú)內(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, // 當(dāng)前天
? ? ? currentMonth: 1, // 當(dāng)前月
? ? ? currentYear: 1970,
? ? ? currentWeek: 1, // 一號(hào)所在的星期
? ? ? days: [], // 當(dāng)月所有天數(shù)
? ? ? content: {},
? ? ? arrDate: [], // 當(dāng)月簽到日期
? ? ? num: 0,
? ? ? day: 10,
? ? ? sign: false,
? ? ? role: '<p>每天簽到可獲得5個(gè)能量</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(); // 今日日期 幾號(hào)
? ? ? this.currentYear = date.getFullYear(); // 當(dāng)前年份
? ? ? this.currentMonth = date.getMonth() + 1; // 當(dāng)前月份
? ? ? 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個(gè)位置，前面6個(gè) 這里默認(rèn)顯示一周，如果需要顯示一個(gè)月，則第二個(gè)循環(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 = {}; // 用一個(gè)對(duì)象包裝Date對(duì)象 ?以便為以后預(yù)定功能添加屬性
? ? ? ? dayobject.day = d;
? ? ? ? this.days.push(dayobject); // 將日期放入data 中的days數(shù)組 供頁(yè)面渲染使用
? ? ? }
? ? ? // 其他周 // 設(shè)置天數(shù)為35天,周日設(shè)置在第一位，循環(huán)從36開(kāi)始
? ? ? 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));
? ? },
? ? // 返回 類(lèi)似 2020-01-01 格式的字符串
? ? formatDate(year, month, day) {
? ? ? month < 10 && (month = '0' + month);
? ? ? day < 10 && (day = '0' + day);
? ? ? const data = year + '-' + month + '-' + day;
? ? ? return data;
? ? },
? ? /**
? ? ?* 點(diǎn)擊簽到
? ? ?* @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;
? ? }
? }
}簽到效果：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)多個(gè)數(shù)組合并
這篇文章主要介紹了vue實(shí)現(xiàn)多個(gè)數(shù)組合并方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)
這篇文章主要介紹了使用vue引入maptalks地圖及聚合效果的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
詳解Vue Elememt-UI構(gòu)建管理后臺(tái)
本篇文章給大家詳細(xì)分享了Vue Elememt-UI構(gòu)建管理后臺(tái)的過(guò)程以及相關(guān)代碼實(shí)例，一起參考學(xué)習(xí)下。2018-02-02
Vue中的v-model，v-bind，v-on的區(qū)別解析
vue.js是一套構(gòu)建用戶(hù)界面的框架，只關(guān)注視圖層，它不僅易于上手，還便于與第三方庫(kù)或既有項(xiàng)目整合，vue.js有配套的第三方類(lèi)庫(kù)，可以整合起來(lái)做大型項(xiàng)目的開(kāi)發(fā)，這篇文章主要介紹了v-model，v-bind，v-on的區(qū)別,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細(xì)介紹了vue3中websocket的封裝與使用的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
Vue3之getCurrentInstance與ts結(jié)合使用的方式
這篇文章主要介紹了Vue3之getCurrentInstance與ts結(jié)合使用的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue項(xiàng)目打包部署到nginx后css樣式失效的問(wèn)題及解決方法
我將自己的前端Vue項(xiàng)目,經(jīng)過(guò)build生成的dist文件夾copy到nginx的html文件夾中,然后寫(xiě)了配置文件,運(yùn)行訪(fǎng)問(wèn)后發(fā)現(xiàn)頁(yè)面css樣式?jīng)]有加載到,下面給大家介紹vue項(xiàng)目打包部署到nginx后css樣式失效的問(wèn)題及解決方法,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了vue 公共列表選擇組件,引用Vant-UI的樣式方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue 路由間跳轉(zhuǎn)和新開(kāi)窗口的方式（query、params）
這篇文章主要介紹了Vue 路由間跳轉(zhuǎn)和新開(kāi)窗口的方式，本文主要通過(guò)query方式和params方式介紹,需要的朋友可以參考下2019-12-12