年份范围筛选

最新推荐文章于 2023-12-15 16:30:20 发布

大橘子呀大橘子

最新推荐文章于 2023-12-15 16:30:20 发布

阅读量227

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/weixin_45283069/article/details/125541256

版权

这篇博客介绍了如何在Vue.js应用中实现年份范围的筛选功能。通过`updateStatisticYear`方法，接收`yearArr`参数，用于选择年份范围，并触发`dataChange`事件，传递类型为'year'的数据，实现数据筛选更新。

摘要由CSDN通过智能技术生成

<template>
  <div class="yearPicker" ref="yearPicker">
    <input
      class="_inner"
      ref="inputLeft"
      v-model="startShowYear"
      @focus="onFocus"
      @blur="onBlur"
      type="text"
      name="yearInput"
      @keyup="checkStartInput($event)"
      placeholder="请选择"
    />
    <span>{
  { sp }}</span>
    <input
      class="_inner"
      ref="inputRight"
      v-model="endShowYear"
      @focus="onFocus"
      @blur="onBlur"
      type="text"
      name="yearInput"
      @keyup="checkEndInput($event)"
      placeholder="请选择"
    />
    <i class="w-input__icon w-icon-calendar icon" @click="onFocus"></i>
    <!-- <i class="dateIcon el-icon-date"></i> 按照自己标准库里面的图标设置-->
    <span class="_inner labelText">{
  { labelText }}</span>
    <div class="_inner floatPanel" v-if="showPanel">
      <div class="_inner leftPanel">
        <div class="_inner panelHead">
          <i class="_inner el-icon-d-arrow-left" @click="onClickLeft">&lt;&lt;</i>
          {
  { leftYearList[0] + '-' + leftYearList[9] }}
        </div>
        <div class="_inner panelContent">
          <div
            :class="{
              oneSelected: item === startYear && oneSelected,
              startSelected: item === startYear,
              endSelected: item === endYear,
              betweenSelected: item > startYear && item < endYear
            }"
            v-for="item in leftYearList"
            :key="item"
          >
            <a
              :class="{
                cell: true,
                _inner: true,
                selected: item === startYear || item === endYear
              }"
              @click="onClickItem(item)"
              @mouseover="onHoverItem(item)"
            >
              {
  { item }}
            </a>
          </div>
        </div>
      </div>
      <div class="_inner rightPanel">
        <div class="_inner panelHead">
          <i class="_inner el-icon-d-arrow-right" @click="onClickRight">&gt;&gt;</i>
          {
  { rightYearList[0] + '-' + rightYearL