vue 仿日历格式对账单下载功能

本次主要是使用vue+element UI来完成对账单功能的实现，需求是当前时间及之前一天不可点击，大于当前日期置灰不可点击。
模板简陋敬请谅解 …

先上效果图

vue

页面布局方便数据渲染

<template><div class="download-box"><div class="block"><el-date-pickervalue-format="yyyy-M"v-model="value2"type="month"placeholder="请选择日期"@change="pickerMonth(value2)"></el-date-picker></div><el-tabs type="card"><el-tab-pane label="日账单"><div class="he-pick"><div @click="monthChange(1)"></div><div class="pick-time">{{ this.year + '-' + this.month }}</div><div @click="monthChange(2)"></div></div><div class="item"><divv-for="(item, index) in dayList":key="index"class="pick-item":class="tabindex === index ? 'tabcolor' : ''"@click="tabPick(item, index)"><div class="item-bg" :class="theday < item ? 'tabsbg' : ''"><divclass="item-day":class="theday === item ? 'activeText' : ''"><div>{{ item.substr(8) }}日</div></div><div class="item-img activeimg01" v-if="theSubday > item"></div><div class="item-hint" v-if="theSubday === item">账单未生成</div></div></div></div></el-tab-pane><el-tab-pane label="月账单">月日历</el-tab-pane></el-tabs></div>
</template>

js

使用new Date 和 moment.js 来完成日历日期的获取，得到日期为年月日的数组方便使用substr() 方法展示。

<script>
// 先引用moment.js,相对于new Date获取当前日期方便
const moment = require('moment');export default {data() {return {// element控件tabPosition: 'top',value2: '',// 获取年月日year: 0,month: 0,// 当前时间theday: 0,// 当前前一天theSubday: 0,// 每个月总天数dayAll: 0,// 点击切换默认下标tabindex: 0,// 存放当前月日期dayList: [],};},created() {this.getMoment();},methods: {// 获取年月getMoment() {this.theSubday = moment().subtract(1, 'days').format('YYYY-MM-DD');this.theday = moment().format('YYYY-MM-DD');this.year = new Date().getFullYear();this.month = new Date().getMonth() + 1;this.getdayAll();},// 获取循环天数getdayAll() {this.dayList = [];this.dayAll = new Date(this.year, this.month, 0).getDate();for (let i = 1; i <= this.dayAll; i += 1) {// for循环并且拼接得到每一天，十号之前自动补上0this.dayList.push(`${this.year}-${this.month < 10 ? `0${this.month}` : this.month}-${i < 10 ? `0${i}` : i}`);}},// tab日历事件monthChange(e) {if (e === 1) {this.tabindex = 0;this.month -= 1;if (this.month < 1) {this.month = 12;this.year -= 1;}} else {this.tabindex = '';this.month += 1;if (this.month > 12) {this.month = 1;this.year += 1;}}this.getdayAll();},// 点击下载事件tabPick(item, index) {// 判断切换点击时的class，大于当前日期无效if (this.theSubday > item) {this.tabindex = index;...执行下载调用接口}},// 日历控件切换显示月份pickerMonth(val) {console.log(val);this.tabindex = '';this.year = val.substr(0, 4);this.month = val.substr(5);console.log(this.year, this.month);this.getdayAll();},},
};
</script>

scss

最后补充下css，这样一个日历格式的对账单下载功能就实现了

.download-box {position: relative;padding-top: 20px;/deep/ {.el-tabs__header {width: 168px;}.el-tabs__item.is-active {color: #fff;background-color: #3388ff;}}
}.block {position: absolute;left: 220px;top: 20px;
}.he-pick {height: 80px;display: flex;align-items: center;justify-content: center;background-color: #f6f6f6;div {&:nth-of-type(1) {width: 21px;height: 21px;background: url(../images/logo_06.png) no-repeat center;background-size: cover;}&:nth-of-type(2) {font-size: 22px;padding: 0 30px;}&:nth-of-type(3) {width: 21px;height: 21px;background: url(../images/logo_07.png) no-repeat center;background-size: cover;}}
}.item {display: flex;flex-wrap: wrap;border-top: 1px solid #eee;border-left: 1px solid #eee;.pick-item {width: 155px;height: 119px;border-right: 1px solid #eee;border-bottom: 1px solid #eee;position: relative;.item-day {font-size: 12px;color: #333;}.item-hint {text-align: center;margin-top: 54px;font-size: 13px;}.activeText {width: 32px;height: 32px;text-align: center;line-height: 32px;background-color: #3388ff;border-radius: 50%;color: #fff;}}.tabsbg {background-color: #f8fafb;}.tabcolor {background-color: #eaf3ff;.item-bg {background-color: #eaf3ff;}.activeimg01 {background: url(../images/logo_09.png) no-repeat center;background-size: cover;}}
}.item-img {width: 16px;height: 18px;position: absolute;left: 0;right: 0;bottom: 20px;margin: 0 auto;
}.activeimg01 {background: url(../images/logo_08.png) no-repeat center;background-size: cover;
}.item-bg {width: 115px;height: 79px;padding: 20px;background-color: #fff;
}

vue 仿日历格式对账单下载功能相关推荐

vue.js 使用axios实现下载功能
本文主要来源于知乎一个回答,这里红色部分做了自己的处理,虽然自己的少,可是很有用的几句代码哦只好回答一下axios如何拦截get请求并下载文件的了. Ajax无法下载文件的原因浏览器的GET(fr ...
前端vue不经过后台实现下载功能本地打印出现报错跨域问题
这段时间有个项目对接法院的项目,主要是内网实现笔录的一个下载打印的问题,主要来说一下打印和下载遇到的坑的问题.首先是打印的问题,这边就是需求就是根据html的东西完了点击打印直接下载为docx的wo ...
vue实现表格的‘模板下载‘功能
样式: 实现点击'模板下载'按钮,下载下方表格模板 css代码: <el-button type="text" class="marginL5" @cli ...
用vue仿贝壳地图找房功
用vue仿贝壳地图找房功能主要实现: 通过baidu-map 实现鼠标滚动缩放地图级别,同时控制行政区划气泡的展示和隐藏: 放大地图,行政区划气泡消失,同时展示改行政区划下面的房源信息,我这里展示的是 ...
大文件下载断点续传后台功能，模仿百度网盘下载功能
最近项目遇到断点续传下载大文件的需求,网上百度了一下,找到了解决方式,感谢大帝的无私奉献. 为了将网盘下载的效果模仿的更真实,特将原作者的代码完善,本着为小白省下完善代码的时间考虑,写了这篇文章. 原 ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...
vue实现图片下载功能so easy
vue实现图片下载功能so easy 1.在前端实现图片下载分为同源图片下载和非同源图片下载 2.解决方案可以根据同源和非同源来制定同源图片下载方案 html中可以这样写 <a href=&q ...
关于springmvc下服务器文件打包成zip格式下载功能
关于springmvc下服务器文件打包成zip格式下载功能 2016年09月21日 11:22:14 toxic_guantou 阅读数:5731更多个人分类: 技术点存储版权声明:本文为博主原创 ...
vue前端生成二维码，实现扫码下载功能
vue前端生成二维码,实现扫码下载功能首先需要安装一个插件 npm install --save qrcodejs2 然后在需要的页面引入插件,最后使用 <template><di ...

vue 仿日历格式对账单下载功能

先上效果图

vue

js

scss

vue 仿日历格式对账单下载功能相关推荐

最新文章

热门文章