第十一篇: 使用ElementUi 卡片封装一个季度选择器公共组件，可直接使用

本篇主要内容：ElementUi 只提供了时间、日历等选择器，没有提供季度选择器，但在开发中报表的时候用到了季度选择器。需要换切换多种类型（年报、月报、季报），

于是封装一个季度公共组件，大家可按需修改引用：

效果如下：

上述是引用组件的示例，下面来简单介绍下封装的季度选择器组件。

1.季度选项弹窗显示

 个人设计为鼠标聚焦的时候进行显示，并判断当前年 year 是否已有值，没有则赋值当年。

    // 聚焦触发,若是年已存在，则不需要重新赋值
    focusClick() {
      if (!this.year) {
        this.year = new Date().getFullYear().toString()
      }
      this.showSeason = true
    }

2.公共组件名命为 QuarterSelect.vue

内容较为简单，大家一眼都能看懂。

<template>
  <div>
    <!--背景-点击可关闭卡片-->
    <mark
      class="bgCard"
      v-if="showSeason"
      @click.stop="showSeason = false"
    ></mark>
    <!-- 显示输入框 -->
    <el-input
      placeholder="请选择季度"
      v-model="showValue"
      style="width:220px;"
      clearable
      @clear="clearClick"
      @focus="focusClick"
    >
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <!-- 季度选择器卡片 -->
    <el-card class="box-card" v-if="showSeason">
      <div slot="header" class="clearfix" style="text-align:center;padding:0">
        <button
          type="button"
          aria-label="前一年"
          class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"
          @click="prevSub"
        ></button>
        <span role="button" class="el-date-picker__header-label"
          >{{ year }}年</span
        >
        <button
          type="button"
          aria-label="后一年"
          @click="nextAdd"
          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
        ></button>
      </div>
      <!-- 季度选择器 -->
      <div class="quarter-block">
        <div class="text-item">
          <el-button
            type="text"
            size="medium"
            :class="[
              'common-quarter',
              'quarter-one',
              quarterActive === '1' ? 'is-active' : ''
            ]"
            @click="selectQuarter('1')"
            >第一季度</el-button
          >
          <el-button
            type="text"
            size="medium"
            :class="[
              'common-quarter',
              'quarter-two',
              quarterActive === '2' ? 'is-active' : ''
            ]"
            @click="selectQuarter('2')"
            >第二季度</el-button
          >
        </div>
        <div class="text-item">
          <el-button
            type="text"
            size="medium"
            :class="[
              'common-quarter',
              'quarter-three',
              quarterActive === '3' ? 'is-active' : ''
            ]"
            @click="selectQuarter('3')"
            >第三季度</el-button
          >
          <el-button
            type="text"
            size="medium"
            :class="[
              'common-quarter',
              'quarter-four',
              quarterActive === '4' ? 'is-active' : ''
            ]"
            @click="selectQuarter('4')"
            >第四季度</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
/**
 * @file:  View 组件 季节选择控件
 * @date: 2021-03-22
 * @description: UI组件  可选择季节
 */

export default {
  props: {},
  data() {
    return {
      showSeason: false,
      year: '', //默认当前年
      showValue: '', //页面上input的内容
      quarterActive: ''
    }
  },

  created() {},

  watch: {},

  methods: {
    // 上一年
    prevSub() {
      this.year = +this.year - 1
    },
    // 下一年
    nextAdd() {
      this.year = +this.year + 1
    },
    // 季度选择
    selectQuarter(quarter) {
      this.quarterActive = quarter
      const result = {
        date: `${this.year}-${quarter}`,
        year: this.year,
        quarter: quarter
      }
      //发送事件给父元素
      this.$emit('getQuarterValue', result)
      this.showSeason = false
      this.showValue = `${this.year}年${quarter}季度`
    },
    // 清除
    clearClick() {
      this.showValue = ''
      this.quarterActive = ''
      this.showSeason = false
      const result = { date: '', year: '', quarter: '' }
      this.$emit('getQuarterValue', result)
    },
    // 聚焦触发,若是年已存在，则不需要重新赋值
    focusClick() {
      if (!this.year) {
        this.year = new Date().getFullYear().toString()
      }
      this.showSeason = true
    }
  }
}
</script>

<style scoped>
.bgCard {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 999;
}
.box-card {
  width: 220px;
  padding: 0 3px 20px;
  margin-top: 10px;
  position: fixed;
  z-index: 9999;
}
.common-quarter {
  width: 40%;
  color: #606266;
}
.quarter-one,
.quarter-three {
  float: left;
}
.quarter-two,
.quarter-four {
  float: right;
}
.text-item {
  text-align: center;
}
.quarter-block {
  display: flex;
  flex-direction: column;
}
.is-active {
  color: #409eff !important;
  border: hidden;
  font-weight: 700;
}
</style>

3. 引用上述的季度选择器组件

引用组件使用函数 getQuarterValue 接收下季度组件传过来的值即可。

<QuarterSelect
     ref="quarter"
     @getQuarterValue="getQuarterValue"></QuarterSelect>

4. 上述简单例子的完整代码为

<template>
  <div>
    <el-form ref="searchform" :model="form" :rules="rules" label-width="120px">
      <el-col :span="8">
        <el-form-item label="时间类型" prop="timetype">
          <el-select
            v-model="form.timetype"
            clearable
            @change="getToolTypeDetail"
            placeholder="请选择活动区域"
          >
            <el-option label="季度" value="quarter"></el-option>
            <el-option label="月份" value="month"></el-option>
            <el-option label="年份" value="year"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <template>
          <el-form-item label="时间" prop="time">
            <template
              v-if="form.timetype === 'month' || form.timetype === 'year'"
            >
              <el-date-picker
                :key="timeKey"
                v-model="form.time"
                clearable
                :type="form.timetype"
                :value-format="form.timetype === 'month' ? 'yyyyMM' : 'yyyy'"
                :placeholder="`选择 ${form.timetype === 'month' ? '月' : '年'}`"
              >
              </el-date-picker>
            </template>
            <!-- 季度选择器 -->
            <template v-else-if="form.timetype === 'quarter'">
              <QuarterSelect
                ref="quarter"
                @getQuarterValue="getQuarterValue"
              ></QuarterSelect>
            </template>
            <template v-else>
              <el-input
                clearable
                v-model="form.time"
                placeholder="请输入内容"
                class="input-form"
              ></el-input>
            </template>
          </el-form-item>
        </template>
      </el-col>
      <el-col :span="8">
        <el-button type="primary" @click="handlerSeach">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import QuarterSelect from '@/components/quarter/QuarterSelect'
export default {
  components: {
    QuarterSelect
  },
  data() {
    return {
      form: {
        timetype: '',
        time: ''
      },
      timeKey: '',
      rules: {
        timetype: [
          {
            required: true,
            message: '请选择时间类型',
            trigger: ['change', 'blur']
          }
        ],
        time: [
          {
            required: true,
            message: '请选择时间',
            trigger: ['change', 'blur']
          }
        ]
      }
    }
  },
  watch: {},
  methods: {
    // 查询
    handlerSeach() {
      console.log(this.form)
      // 规则校验
      const valid = this.$refs['searchform'].validate()
      if (!valid) {
        return
      }
    },
    // 时间类型切换
    getToolTypeDetail(val) {
      console.log(val)
      this.form.time = ''
    },
    // 季度选择
    getQuarterValue(value) {
      const { date, year, quarter } = value
      this.form.time = date
      console.log(year, quarter)
    },
    // 重置功能
    resetForm() {
      if (this.$refs.quarter) {
        this.$refs.quarter.clearClick()
      }
      this.$refs.searchform.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.input-form {
  width: 220px;
}
</style>

希望能够帮助到您，感谢支持！！！ 🙏🙏

上一篇：第十篇 ElementUI 树形表格懒加载-新增修改删除等操作进行局部刷新数据