季度选择控件element-ui+vue组件

Dear 丶 2022-01-23 14:45 2568阅读 0赞

![未展开][20190604104355265.png]  
![展开之后][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NteTA4MTY_size_16_color_FFFFFF_t_70]

> 季度选择器其实是很经常用到的控件，elementui里面居然没有，情急之下利用elementui里面的其他组件做了个类似的组件，需要自取~

<template>
    <div>
    日期
    <mark
      style="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"
      v-show="showSeason"
      @click.stop="showSeason=false"
    ></mark>
    <el-input placeholder="请选择季度" v-model="showValue" style="width:138px;" @focus="showSeason=true">
      <i slot="prefix" class="el-input__icon el-icon-date"></i>
    </el-input>
    <el-card
      class="box-card"
      style="width:322px;padding: 0 3px 20px;margin-top:10px;position:fixed;z-index:9999"
      v-show="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="prev"
        ></button>
        <span role="button" class="el-date-picker__header-label">{
       {year}}年</span>
        <button
          type="button"
          aria-label="后一年"
          @click="next"
          class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right"
        ></button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          size="medium"
          style="width:40%;color: #606266;float:left;"
          @click="selectSeason(0)"
        >第一季度</el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(1)"
        >第二季度</el-button>
      </div>
      <div class="text item" style="text-align:center;">
        <el-button
          type="text"
          size="medium"
          style="width:40%;color: #606266;float:left;"
          @click="selectSeason(2)"
        >第三季度</el-button>
        <el-button
          type="text"
          size="medium"
          style="float:right;width:40%;color: #606266;"
          @click="selectSeason(3)"
        >第四季度</el-button>
      </div>
    </el-card>
    </div>
    </template>
    <script>
    /**
     * @file:  View 组件 季节选择控件
     * @author: v_zhuchun
     * @date: 2019-05-23
     * @description: UI组件  可选择季节
     * @api: valueArr : 季度value defalut['01-03', '04-06', '07-09', '10-12'] 默认值待设置
     */
    export default {
      props: {
        valueArr: {
          default: () => {
            return ['01-03', '04-06', '07-09', '10-12']
          },
          type: Array
        },
        getValue: {
          default: () => {},
          type: Function
        },
        defaultValue: {
          default: '',
          type: String
        }
      },
      data() {
        return {
          showSeason: false,
          season: '',
          year: new Date().getFullYear(),
          showValue: ''
        }
      },
      created() {
        if (this.defaultValue) {
          let value = this.defaultValue
          let arr = value.split('-')
          this.year = arr[0].slice(0, 4)
          let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
          let arrAll = this.valueArr
          this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
        }
      },
      watch: {
        defaultValue: function(value, oldValue) {
          let arr = value.split('-')
          this.year = arr[0].slice(0, 4)
          let str = arr[0].slice(4, 6) + '-' + arr[1].slice(4, 6)
          let arrAll = this.valueArr
          this.showValue = `${this.year}年${arrAll.indexOf(str) + 1}季度`
        }
      },
      methods: {
        one() {
          this.showSeason = false
        },
        prev() {
          this.year = this.year * 1 - 1
        },
        next() {
          this.year = this.year * 1 + 1
        },
        selectSeason(i) {
          let that = this
          that.season = i + 1
          let arr = that.valueArr[i].split('-')
          that.getValue(that.year + arr[0] + '-' + that.year + arr[1])
          that.showSeason = false
          this.showValue = `${this.year}年${this.season}季度`
        }
      }
    }
    </script>

> 季度的value是可以自定义的  
> getValue函数的参数就是组件选择的值  
> 获取到值的形式为 ‘201904-201906’// 可根据情况自行调节

[20190604104355265.png]: /images/20220123/03b1f2379a9844fba84b4a7e21f3a1c4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NteTA4MTY_size_16_color_FFFFFF_t_70]: /images/20220123/fce705b80b444c41b4f6cdee2a691118.png