季度选择框的封装

一、封装

(function (vue, $, name) {
  vue.component(name, {
    template: '<div>\
    <lin-input placeholder="请选择季度" :readonly="true" v-model="showValue" @focus="focusFn" @change="getInputValue">\
      <i slot="prefix" class="el-input__icon el-icon-date"></i>\
    </lin-input>\
    <div class="el-card box-card quarter_card" v-show="showSeason">\
      <div class="el-card__header"  style="text-align: center;padding:0">\
        <lin-button type="text" @click="prev" ><<</lin-button>\
          <span class="el-date-picker__header-label" style="padding: 0 15%">{{year}}年</span>\
        <lin-button type="text" @click="next" >>></lin-button>\
      </div>\
      <div>\
        <div style="text-align:left;" >\
          <ul>\
            <li class="el-dropdown-menu__item" :class="{\'el-button--primary\': season == 0}"  @click="selectSeason(0)">第一季度</li>\
            <li class="el-dropdown-menu__item" :class="{\'el-button--primary\': season == 1}" @click="selectSeason(1)">第二季度</li>\
            <li class="el-dropdown-menu__item" :class="{\'el-button--primary\': season == 2}" @click="selectSeason(2)">第三季度</li>\
            <li class="el-dropdown-menu__item" :class="{\'el-button--primary\': season == 3}" @click="selectSeason(3)">第四季度</li>\
          </ul>\
        </div>\
      </div>\
    </div>\
    </div> ',
    props: {
      valueArray: {
        default: function () {
          return ['03', '06', '09', '12'];
        },
        type: Array
      },
      value: String
    },
    data: function () {
      return {
        showSeason: false,
        year: new Date().getFullYear(),
        season: '',
        showValue: ''
      };
    },
    methods: {
      focusFn: function () {
        this.showSeason = true;
      },
      blurFn: function () {
        this.showSeason = false;
      },
      prev: function () {
        this.year = this.year * 1 - 1;
      },
      next: function () {
        this.year = this.year * 1 + 1;
      },
      selectSeason: function (i) {
        this.$emit('input', this.year + '-' + this.valueArray[i]);
        this.showSelectVal(this.year + '-' + this.valueArray[i]);
        this.showSeason = false;
      },
      showSelectVal: function (val) {
        let arr = val.split('-');
        this.year = arr[0];
        this.season = this.valueArray.indexOf(arr[1]);
        this.showValue = this.year + '年' + (this.season + 1) + '季度';
      },
      getInputValue: function (val) {
        this.$emit('change', this.value);
      }
    },
    mounted: function () {
    },
    created: function () {
      if (this.value) {
        this.showSelectVal(this.value);
      }
    },
    watch: {
      value: function (newVal) {
        // console.log('value监听--' + newVal);
        this.showSelectVal(newVal);
      }
    }
  });
}(Vue, linfp.$, 'lin-quarter'));

2、用法

<yu-quarter  @change="reportDate"  v-model="value" ></yu-quarter>