months.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. const Months = {
  2. template: `
  3. <a-select
  4. :placeholder="placeholder"
  5. :id="id"
  6. allowClear
  7. :value="defaultVal"
  8. :showSearch="true"
  9. :mode="mode"
  10. :disabled="disabled"
  11. :maxTagCount="2"
  12. @change="handleChange"
  13. option-filter-prop="children"
  14. :filter-option="filterOption">
  15. <a-select-option v-for="item in monthList" :key="item.val" :value="item.val" :disabled="item.disabled">{{ item.name }}</a-select-option>
  16. </a-select>
  17. `,
  18. props: {
  19. value: {
  20. type: [String,Array],
  21. defatut: ''
  22. },
  23. id: {
  24. type: String,
  25. default: ''
  26. },
  27. mode: {
  28. type: String,
  29. default: 'default'
  30. },
  31. disabled: {
  32. type: Boolean,
  33. default: false
  34. },
  35. placeholder:{
  36. type: String,
  37. default: '请选择月份'
  38. }
  39. },
  40. data() {
  41. return {
  42. defaultVal: this.value,
  43. monthList: []
  44. };
  45. },
  46. mounted() {
  47. const year = new Date().getFullYear()
  48. const curMonth = new Date().getMonth()
  49. const m = ['一','二','三','四','五','六','七','八','九','十','十一','十二']
  50. for(let i=1;i<=12;i++){
  51. this.monthList.push({
  52. val: year +"-" + (i<10?'0'+i:i),
  53. name: year + '年' + (i<10?'0'+i:i) + '月',
  54. disabled: (i-1)>curMonth
  55. })
  56. }
  57. },
  58. watch: {
  59. value(newValue, oldValue) {
  60. this.defaultVal = newValue
  61. },
  62. },
  63. methods: {
  64. filterOption (input, option) {
  65. return (
  66. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  67. )
  68. },
  69. handleChange(value) {
  70. this.defaultVal = value;
  71. const row = this.monthList.find(item => item.val == value)
  72. this.$emit('input', value);
  73. this.$emit('change', value, this.id, row);
  74. },
  75. },
  76. };
  77. export default Months