yearProgress.vue

 1 <template>
 2   <div class="progressbar">
 3     <el-progress :text-inside="true" :soke-width="18" :percentage="percent" status="exception"></el-progress>
 4     <p>{{year}}年已经过去了{{days}}天，{{percent}}%</p>
 5   </div>
 6 </template>
 7 <script>
 8 export default {
 9   methods: {
10     isLeapYear () {
11       const year = new Date().getFullYear()
12       if (year % 400 === 0) {
13         return true
14       } else if (year % 4 === 0 && year % 100 !== 0) {
15         return true
16       } else {
17         return false
18       }
19     },
20     getDayOfYear () {
21       return this.isLeapYear() ? 366 : 365
22     }
23   },
24   computed: {
25     year () {
26       return new Date().getFullYear()
27     },
28     days () {
29       let start = new Date()
30       start.setMonth(0)
31       start.setDate(1)
32       // start就是今年第一天
33       // 今天的时间戳 减去今年第一天的时间戳
34       let offset = new Date().getTime() - start.getTime()
35       return parseInt(offset / 1000 / 60 / 60 / 24)   1
36     },
37     percent () {
38       return (this.days * 100 / this.getDayOfYear()).toFixed(1)
39     }
40   }
41 }
42 </script>
43 <style scoped>
44 .progressbar {
45   text-align: center;
46   margin-top:30px;
47   margin-bottom:40px;
48   width:100%;
49 }
50 .progressbar >>> .el-progress-bar {
51     width: 30%;
52 }
53 </style>

更多专业前端知识，请上【猿2048】www.mk2048.com

yearProgress.vue相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue实现文件上传功能
代码如下所示: <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
win10 4步快速安装vue
1 安装nvm-windows 在这里下载安装nvm,目的是在同一台电脑中管理多个 Node 版本建议采取默认安装路径安装 2 安装nodejs 以管理员模式打开命令行,然后输入 nvm list ...
前端Vue学习之路(五)插件的使用
vant插件使用这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话找到package.json文件添加以下内容 plugins:[['import', ...
前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动所以封装 ...
前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由二.动态路由+路由嵌套+404页面三. 编程式导航四.命名路由五.命名视图六.重定向和起别名 1.重定向 2.起别名 ...
前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言先安装node.js环境 ...
Vue 自定义权限指令
前述虽然VUE 定义了一些常用的指令,例如v-on.v-bind等,但是在我们实际开发的时候,还是会自己定义一些指令用于适应我们自己的业务. 实现这里由于我的项目做了动态权限,页面的按钮也需要根据 ...
vue响应式给数组中的对象添加新属性
需要使用到vue的全局api $set(item,'newParam','value')方法 group: [ // 对象数组{ id: '1', name: '任务1' ,disable: fals ...

yearProgress.vue

yearProgress.vue相关推荐

最新文章

热门文章