index.vue 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. <template>
  2. <div class="year-month-select">
  3. <div class="year-warp" style="width: 95px">
  4. <el-date-picker
  5. v-model="year"
  6. type="year"
  7. :clearable="false"
  8. placeholder="选择年"
  9. size="small"
  10. value-format="yyyy"
  11. >
  12. </el-date-picker>
  13. </div>
  14. <div class="month-wrap">
  15. <div class="month-list">
  16. <div
  17. :class="[{ active: month == item.value }, 'month-list-item']"
  18. v-for="item of monthList"
  19. :key="item.value"
  20. @click="handleMonthClick(item)"
  21. >
  22. {{ item.name }}
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </template>
  28. <script>
  29. export default {
  30. name: "YearMonthSelect",
  31. props: {
  32. value: {
  33. type: String,
  34. default: "",
  35. },
  36. },
  37. data() {
  38. return {
  39. monthList: [],
  40. year: "",
  41. month: "",
  42. };
  43. },
  44. watch: {
  45. value: {
  46. handler(newVal) {
  47. if (newVal) {
  48. let dateArr = newVal.split("-");
  49. this.year = dateArr[0];
  50. this.month = dateArr[1] || "00";
  51. }
  52. },
  53. immediate: true,
  54. },
  55. year(newVal) {
  56. this.$emit("input", this.formatYearMonth(newVal, this.month));
  57. },
  58. },
  59. created() {
  60. this.initMonth();
  61. },
  62. methods: {
  63. initMonth() {
  64. let list = [];
  65. for (let i = 0; i < 12; i++) {
  66. let month = i + 1;
  67. list.push({
  68. name: month + "月",
  69. value: month > 9 ? month.toString() : "0" + month,
  70. });
  71. }
  72. list.push({ name: "全年", value: "00" });
  73. this.monthList = list;
  74. },
  75. formatYearMonth(year, month) {
  76. if (month == "00") {
  77. return year;
  78. }
  79. return year + "-" + month;
  80. },
  81. handleMonthClick(data) {
  82. this.month = data.value;
  83. this.$emit("input", this.formatYearMonth(this.year, this.month));
  84. },
  85. },
  86. };
  87. </script>
  88. <style lang="scss">
  89. .year-month-select {
  90. display: flex;
  91. align-items: center;
  92. margin: 12px 0;
  93. }
  94. .month-list {
  95. display: flex;
  96. margin-left: 12px;
  97. &-item {
  98. width: 40px;
  99. height: 30px;
  100. line-height: 30px;
  101. text-align: center;
  102. background-color: #fff;
  103. color: #409eff;
  104. border-radius: 4px;
  105. margin-right: 8px;
  106. border: 1px solid #409eff;
  107. cursor: pointer;
  108. font-size: 12px;
  109. &.active {
  110. background-color: #409eff;
  111. color: #fff;
  112. }
  113. // &.primary {
  114. // background-color: #409EFF;
  115. // border: 1px solid #409EFF;
  116. // }
  117. // &.success {
  118. // background-color: #67c23a;
  119. // border-color: #67c23a;
  120. // }
  121. }
  122. }
  123. </style>