element UI选择,季度,半年

梦里梦外; 2022-11-29 11:47 178阅读 0赞

<template>
      <div>
        <div>
          <el-button type="primary" size="small" plain @click="quarterTime">季度</el-button>
          <el-button type="primary" size="small" plain @click="halfYear">半年</el-button>
        </div>
        <span @click="showDoubleMonth">
          <el-input
            v-model="choseQuarter"
            prefix-icon="el-icon-date"
            placeholder="请选择"
          />
        </span>
        <div v-show="showTime1a" class="show1">
          <p>
            <button
              type="button"
              aria-label="前一年"
              class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
              @click="prev"
            />
            <span role="button" class="span-year">{
       { year }}年</span>
            <button
              type="button"
              aria-label="后一年"
              class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
              @click="next"
            />
          </p>
          <div>
            <span
              v-for="(item,index) in fullMonth"
              :key="index"
              class="selectMonth"
              @click="selectQuarter(item)"
            >{
       { item }}</span>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value: '',
            showTime2: false,
            showTime1a: false,
            year: new Date().getFullYear(),
            fullMonth: ['第一季度', '第二季度', '第三季度', '第四季度'],
            choseQuarter: ''
          }
        },
        methods: {
          // 点击季度按钮
          quarterTime() {
            this.showTime2 = true
            this.choseQuarter = ''
            this.fullMonth = ['第一季度', '第二季度', '第三季度', '第四季度']
          },
          // 点击半年按钮
          halfYear() {
            this.showTime2 = true
            this.choseQuarter = ''
            this.fullMonth = ['上半年', '下半年']
          },
          // 点击input框
          showDoubleMonth() {
            this.showTime1a = true
          },
          // 上一年
          prev() {
            this.year = this.year * 1 - 1
          },
          // 下一年
          next() {
            this.year = this.year * 1 + 1
          },
          // 点击选项事件
          selectQuarter(item) {
            switch (item) {
            case '第一季度':
              this.choseQuarter = this.year + '-' + 'Q1'
              break
            case '第二季度':
              this.choseQuarter = this.year + '-' + 'Q2'
              break
            case '第三季度':
              this.choseQuarter = this.year + '-' + 'Q3'
              break
            case '第四季度':
              this.choseQuarter = this.year + '-' + 'Q4'
              break
            case '上半年':
              this.choseQuarter = this.year + '-' + 'H1'
              break
            case '下半年':
              this.choseQuarter = this.year + '-' + 'H2'
              break
            }
            this.showTime1a = false
          }
        }
      }
    </script>
    <style scoped>
      *{
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .show1{
        width: 320px;
        margin-top: 5px;
        position: absolute;
        z-index: 2;
        height: auto;
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        background: #fff;
        padding: 5px;
      }
      .show1 p:nth-child(1){
        width: 100%;
        height: 40px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: end;
        padding: 0 10px;
      }
      .show1>div{
        width: 100%;
        height: auto;
      }
      .show1>div span{
        width: 50%;
      }
      .selectMonth{
        display: inline-block;
        float: left;
        width: 78px;
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
      .selectMonth:hover{
        background: rgba(19,131,255,0.052);
      }
      .span-year{
        width: 90%;
        margin: 0 auto;
        display: inline-block;
        text-align: center;
        line-height: 40px;
      }
    </style>