组件二次封装-选择日期季度

发表于 更新于 分类于

图示

组件使用

1
2
3
4
5
6
7
<el-form ref="form" :model="conditionForm" label-width="80px">
  <condition-date-quarter
    popper-class="condition-picker"
    v-model="conditionForm.analysisDate"
    placeholder="选择日期季度"
  ></condition-date-quarter>
</el-form>
1
2
3
4
5
6
7
8
9
10
11
12
import ConditionDateQuarter from "@/components/ConditionForm/ConditionDateQuarter";

export default {
  data() {
    return {
      conditionForm: {
        analysisDate: ""
      }
    };
  },
  components: { ConditionDateQuarter }
};

组件完整代码展示

该组件需要全局注入 element-ui 中的 Form，FormItem 组件

1
2
3
4
// main.js
import { Form, FormItem } from "element-ui";

Vue.use(Form).use(FormItem);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<el-form-item style="margin-right: 0;">
  <el-popover
    v-model="popover"
    popper-class="quarter-popover"
    ref="popover"
    placement="bottom"
    width="400"
    trigger="focus"
  >
    <div>
      <div style="text-align:center;">
        <button
          type="button"
          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
          @click="prev"
          :style="prevYearDisabled"
        ></button>
        <span class="el-date-picker__header-label">{{ year }}年</span>
        <button
          type="button"
          @click="next"
          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
          :style="nextYearDisabled"
        ></button>
      </div>
      <div class="popover-body">
        <div
          class="popover-item"
          :class="{ active: quarterValue == item.value, disabled: quarterDisabled(item.value) }"
          v-for="item in quarterList"
          :key="item.value"
          @click="handleSetQuarterValue(item.value)"
        >
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>
    <el-input
      ref="quarterInput"
      prefix-icon="el-icon-date"
      slot="reference"
      v-model="inputValue"
      v-bind="$attrs"
      readonly
      @mouseenter.native="inputHovering = true"
      @mouseleave.native="inputHovering = false"
    >
      <template slot="suffix">
        <i
          v-if="showClose"
          class="el-select__caret el-input__icon el-icon-circle-close"
          style="cursor: pointer;"
          @click="handleClearClick"
        ></i>
      </template>
    </el-input>
  </el-popover>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { Popover } from "element-ui";
export default {
  inheritAttrs: false,
  model: {
    prop: "value",
    event: "change"
  },
  data() {
    return {
      popover: false,
      year: new Date().getFullYear(),
      quarterValue: "",
      quarterList: [
        {
          label: "第一季度",
          value: 1
        },
        {
          label: "第二季度",
          value: 2
        },
        {
          label: "第三季度",
          value: 3
        },
        {
          label: "第四季度",
          value: 4
        }
      ],
      inputValue: "",
      inputHovering: false
    };
  },
  computed: {
    totalValue() {
      if (this.year && this.quarterValue) {
        return this.year + "-" + this.quarterValue;
      } else {
        return "";
      }
    },
    showClose() {
      return this.inputHovering && this.inputValue;
    },
    prevYearDisabled() {
      if (this.year <= 2000) {
        return { color: "#ddd", cursor: "not-allowed" };
      } else {
        return {};
      }
    },
    nextYearDisabled() {
      if (new Date().getFullYear() <= this.year) {
        return { color: "#ddd", cursor: "not-allowed" };
      } else {
        return {};
      }
    }
  },
  components: {
    ElPopover: Popover
  },
  methods: {
    prev() {
      if (this.year > 2000) {
        this.year--;
      }
    },
    next() {
      if (this.year < new Date().getFullYear()) {
        this.year++;
      }
    },
    handleSetQuarterValue(value) {
      if (!this.quarterDisabled(value)) {
        this.quarterValue = value;
      }
    },
    quarterDisabled(value) {
      const currMonth = new Date().getMonth() + 1;
      const quarter = Math.floor(
        currMonth % 3 == 0 ? currMonth / 3 : currMonth / 3 + 1
      );
      if (
        this.year < new Date().getFullYear() ||
        (this.year >= new Date().getFullYear() && quarter >= value)
      ) {
        return false;
      } else {
        return true;
      }
    },
    handleClearClick() {
      this.inputValue = "";
      this.quarterValue = "";
      this.$emit("change", "");
      this.$refs.quarterInput.blur();
    }
  },
  watch: {
    totalValue() {
      this.inputValue = this.totalValue;
      this.$emit("change", this.inputValue);
      this.popover = false;
    },
    value() {
      this.year = this.value.split("-")[0];
      this.quarterValue = this.value.split("-")[1];
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.quarter-popover.el-popper {
  padding: 24px;
  .popover-body {
    margin-top: 20px;
  }
  .popover-body::after {
    content: "";
    display: block;
    clear: both;
  }
  .popover-item {
    float: left;
    width: 150px;
    text-align: center;
    color: #333333;
    padding: 10px 0;
    cursor: pointer;
    &:hover,
    &.active {
      color: #2683ff;
    }
    &.disabled {
      color: #ddd;
      cursor: not-allowed;
    }
  }
}