year-filter.js 2.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. (function(){
  2. Vue.component('year-filter', {
  3. template: '<div style="height: 400px;overflow: auto;">\
  4. <div class="mt10 ml10 filter-title">统计年份</div>\
  5. <div class="c-row ml40 mr10">\
  6. <div v-for="year in years" class="c-33 mt20" style="margin-left:0;margin-right:3%;" :class="{\'active\': year==selectedYear}" @click="chooseYear(year)"><a>{{year}}</a></div>\
  7. </div>\
  8. <div id="footer">\
  9. <div class="c-row btn-wrap c-border-top fr">\
  10. <div class="div-foot-btn mr20" @click="resetClick">\
  11. <a href="#" class="c-666 f-fs16">重置</a>\
  12. </div>\
  13. <div class="div-foot-btn active" @click="confirmClick">\
  14. <a href="#" class="c-666 f-fs16">确定</a>\
  15. </div>\
  16. </div>\
  17. </div>\
  18. </div>',
  19. props:['selectedYear',"minYear"],
  20. data: function(){
  21. return {
  22. years: []
  23. }
  24. },
  25. methods: {
  26. chooseYear:function(year){
  27. this.selectedYear = year;
  28. },
  29. resetClick:function(){
  30. this.selectedYear = this.years[0];
  31. },
  32. confirmClick:function(){
  33. //触发刷新
  34. var vm = this;
  35. Vuedals.Bus.$emit('close', {
  36. chooseYear: vm.selectedYear,
  37. });
  38. }
  39. },
  40. mounted: function(){
  41. //显示年份最低是2016年
  42. var now = new Date(),
  43. year = now.getFullYear();
  44. var minYear = 2016
  45. if(this.minYear){
  46. minYear = this.minYear
  47. }
  48. // if(now.getMonth() >= 6){
  49. // this.years.push(year);
  50. // }
  51. for(i=year; i>=minYear; i--){
  52. this.years.push(i);
  53. }
  54. //如果前一个页面返回的选中的年份
  55. if(!this.selectedYear){
  56. this.selectedYear = this.years[i];
  57. }
  58. }
  59. })
  60. })()