vue 仿日历格式对账单下载功能
本次主要是使用vue+element UI来完成对账单功能的实现,需求是当前时间及之前一天不可点击,大于当前日期置灰不可点击。模板简陋敬请谅解 …先上效果图vue页面布局方便数据渲染<template><div class="download-box"><div class="block"><el-date-pickervalue-format="yyyy
·
本次主要是使用vue+element UI来完成对账单功能的实现,需求是当前时间及之前一天不可点击,大于当前日期置灰不可点击。
模板简陋敬请谅解 …
先上效果图
vue
页面布局方便数据渲染
<template>
<div class="download-box">
<div class="block">
<el-date-picker
value-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">
<div
v-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' : ''">
<div
class="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循环并且拼接得到每一天,十号之前自动补上0
this.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;
}
更多推荐
已为社区贡献2条内容
所有评论(0)