yearProgress.vue
生活随笔
收集整理的這篇文章主要介紹了
yearProgress.vue
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<template>
<div class="progressbar">
<el-progress :text-inside="true" :soke-width="18" :percentage="percent" status="exception"></el-progress>
<p>{{year}}年已經過去了{{days}}天，{{percent}}%</p>
</div>
</template>
<script>
export default {
methods: {
isLeapYear () {
const year = new Date().getFullYear()
if (year % 400 === 0) {
return true
} else if (year % 4 === 0 && year % 100 !== 0) {
return true
} else {
return false
}
},
getDayOfYear () {
return this.isLeapYear() ? 366 : 365
}
},
computed: {
year () {
return new Date().getFullYear()
},
days () {
let start = new Date()
start.setMonth(0)
start.setDate(1)
// start就是今年第一天
// 今天的時間戳 減去今年第一天的時間戳
let offset = new Date().getTime() - start.getTime()
return parseInt(offset / 1000 / 60 / 60 / 24) + 1
},
percent () {
return (this.days * 100 / this.getDayOfYear()).toFixed(1)
}
}
}
</script>
<style scoped>
.progressbar {
text-align: center;
margin-top:30px;
margin-bottom:40px;
width:100%;
}
.progressbar >>> .el-progress-bar {
width: 30%;
}
</style>
總結
以上是生活随笔為你收集整理的yearProgress.vue的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单的鼠标可拖动div 兼容IE/FF
- 下一篇： vue学习(十六) 自定义私有过滤器 E