index.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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 v-if="showMonth" 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. import moment from "moment";
  30. export default {
  31. name: "YearMonthSelect",
  32. props: {
  33. value: {
  34. type: String,
  35. default: "",
  36. },
  37. showMonth: {
  38. type: Boolean,
  39. default: true
  40. }
  41. },
  42. data() {
  43. return {
  44. monthList: [],
  45. year: "",
  46. month: "",
  47. };
  48. },
  49. watch: {
  50. value: {
  51. handler(newVal) {
  52. if (newVal) {
  53. let dateStr = newVal.replace(/-/g, '');
  54. this.year = dateStr.substr(0, 4);
  55. this.month = dateStr.substr(4, 2) || "00";
  56. }
  57. },
  58. immediate: true,
  59. },
  60. year(newVal) {
  61. this.$emit("input", this.formatYearMonth(newVal, this.month));
  62. },
  63. },
  64. created() {
  65. this.initMonth();
  66. },
  67. methods: {
  68. initMonth() {
  69. let list = [];
  70. for (let i = 0; i < 12; i++) {
  71. let month = i + 1;
  72. list.push({
  73. name: month + "月",
  74. value: month > 9 ? month.toString() : "0" + month,
  75. });
  76. }
  77. list.push({ name: "全年", value: "00" });
  78. this.monthList = list;
  79. },
  80. formatYearMonth(year, month) {
  81. if (month == "00") {
  82. return year;
  83. }
  84. return year + "" + month;
  85. },
  86. handleMonthClick(data) {
  87. this.month = data.value;
  88. this.$emit("input", this.formatYearMonth(this.year, this.month));
  89. },
  90. },
  91. };
  92. </script>
  93. <style lang="scss">
  94. .year-month-select {
  95. display: flex;
  96. align-items: center;
  97. margin: 12px 0;
  98. }
  99. .month-list {
  100. display: flex;
  101. margin-left: 12px;
  102. &-item {
  103. width: 40px;
  104. height: 30px;
  105. line-height: 30px;
  106. text-align: center;
  107. background-color: #fff;
  108. color: #409eff;
  109. border-radius: 4px;
  110. margin-right: 8px;
  111. border: 1px solid #409eff;
  112. cursor: pointer;
  113. font-size: 12px;
  114. &.active {
  115. background-color: #409eff;
  116. color: #fff;
  117. }
  118. // &.primary {
  119. // background-color: #409EFF;
  120. // border: 1px solid #409EFF;
  121. // }
  122. // &.success {
  123. // background-color: #67c23a;
  124. // border-color: #67c23a;
  125. // }
  126. }
  127. }
  128. </style>