vue2 封装年

父页面

<template>
  <div>
    <div class="heard-style">
      <div class="year-style">
        <date
          :date="date"
          @dateT="beginFunctionFn"
          @beginD="kickFunctionFn"
          @endDate="finishFunctionFn"
          :yearS="yearS"
          :yearE="yearE"
        ></date>
      </div>
    </div>
  </div>
</template>
<script>
import date from './components/index' //日期

var yearlistAPI = [
  2024, 2023, 2022, 2021, 2020, 2019, 2018, 2017, 2016, 2015, 2014, 2013, 2012, 2011, 2010, 2009, 2008, 2007, 2006,
  2005, 2004, 2003,
]
export default {
  data() {
    return {
      date: [],
      yearS: '',
      yearE: '',
    }
  },
  components: {
    date,
  },
  created() {
    this.yearFunctionFn()
  },
  methods: {
    yearFunctionFn() {
      let yearlist = []
      yearlistAPI.forEach(item => {
        yearlist.push({
          label: item + '',
          value: item,
        })
      })
      this.date = yearlist
      this.yearS = this.date[0].value.toString()
      this.yearE = this.date[0].value.toString()
    },
    beginFunctionFn(val) {
      console.log('val打印{endShowYear:2024;startShowYear:2024}')
    },
    kickFunctionFn(v) {
      console.log(v, '日期开始2024')
    },
    finishFunctionFn(v) {
      console.log(v, '日期结束2024')
    },
  },
}
</script>
<style lang="scss" scoped>
.heard-style {
  display: flex;
  justify-content: space-between;
  height: 50px;
}
.year-style {
  margin-top: 8px;
  margin-right: 45px;
  display: flex;
}
</style>

子页面

<template>
  <div class="year-all">
    <div
      ref="yearPicker"
      style="width: 300px; line-height: 34px; height: 36px; border: 1px solid #e8e8e8"
      @mouseover="onHoverIcon"
      @mouseleave="lossHoverIcon"
    >
      <div class="toA">
        <div class="toB">
          <div class="toC">
            <i class="el-icon-date" @click="clickLeftIcon"></i>
          </div>
          <div>
            <input
              ref="inputLeft"
              v-model="startShowYear"
              class="range_input"
              type="text"
              name="yearInput"
              @focus="onFocus"
              placeholder="开始年份"
              readonly="readonly"
              @keyup="handleInput('start')"
            />
          </div>
          <div><span class="toF">至</span></div>
          <div>
            <input
              ref="inputRight"
              v-model="endShowYear"
              readonly="readonly"
              class="range_input"
              type="text"
              @focus="onFocus"
              name="yearInput"
              placeholder="结束年份"
              @keyup="handleInput('end')"
            />
          </div>
        </div>
        <!-- 删除icon -->
        <div class="toD" v-if="isClearIconShow">
          <i class="el-input__icon el-range__close-icon el-icon-circle-close" @click="clearSelectYear"></i>
        </div>
      </div>
    </div>

    <!-- 点击 -->
    <transition name="el-zoom-in-top">
      <div
        v-show="showPanel"
        ref="popover"
        class="el-popover"
        placement="bottom"
        popper-class="custom_year_range"
        trigger="manual"
      >
        <div class="float-panel">
          <div class="left-panel">
            <div class="toE">
              <div><i class="el-icon-d-arrow-left" @click="onClickLeft(1)"></i></div>
              <div>
                <span class="year-main">
                  {{ tableDatas[0] + '年 ' + '- ' + tableDatas[tableDatas.length - 1] + '年' }}
                </span>
              </div>
              <div><i class="el-icon-d-arrow-right" @click="onClickLeft(2)"></i></div>
            </div>
            <div class="panel-content">
              <div
                v-for="item in tableDatas"
                :key="item"
                class="year-item"
                @click="onClickItem(item)"
                @mouseover="onHoverItem(item)"
              >
                {{ item }}
              </div>
            </div>
          </div>
          <div class="right-panel">
            <div class="toQ">
              <div><i class="_inner el-icon-d-arrow-left" @click="onClickRight(1)"></i></div>
              <div>
                <span class="year-main">{{
                  tableRightDatas[0] + '年 ' + '- ' + tableRightDatas[tableRightDatas.length - 1] + '年'
                }}</span>
              </div>
              <div><i class="el-icon-d-arrow-right" @click="onClickRight(2)"></i></div>
            </div>
            <div class="panel-content">
              <div
                v-for="(item, index) in tableRightDatas"
                :key="index"
                class="years-item"
                @click="beClickItem(item)"
                @mouseover="onHoverItem(item)"
              >
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'YearPicker',
  props: {
    date: {
      type: Array,
      default: () => [],
    },
    yearS: {
      type: String,
      default: '',
    },
    yearE: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      showPanel: false, //数据
      dataList: [], //数据
      startShowYear: '',
      endShowYear: '',
      isClearIconShow: false, //删除
      // 表格绑定的数据左侧
      tableDatas: [],
      // 表格右侧
      tableRightDatas: [],
      page: 1,
      totalPage: null,
      totalPageRigth: null,
    }
  },
  computed: {
    leftYearList() {
      return this.dataList.slice(0, 10)
    },
  },
  created() {
    this.dataFn()
  },
  watch: {
    date(newValue) {
      this.dataFn(newValue)
    },
    yearS(newValue) {
      this.startShowYear = newValue
      this.$emit('beginD', this.startShowYear)
    },
    yearE(newValue) {
      this.endShowYear = newValue
      this.$emit('endDate', this.endShowYear)
      const params = {
        startShowYear: this.startShowYear,
        endShowYear: this.endShowYear,
        num: 0,
      }
      this.$emit('dateT', params)
    },
  },
  mounted() {},
  methods: {
    //   日期数据
    dataFn(val) {
      if (val) {
        console.log(val, 'bal')
        this.dataList = val.map(item => {
          return item.value
        })
        this.endList = this.dataList
        this.tableDatas = this.endList.slice(0, 10) // 假设一页展示5条数据，将首页数据分隔出来
        this.tableRightDatas = this.endList.slice(0, 10)
        this.totalPage = Math.ceil(this.dataList.length / 10)
        this.totalPageRigth = Math.ceil(this.dataList.length / 10)
        this.startShowYear
      } else {
        this.dataList = this.date.map(item => {
          return item.value
        })
        this.endList = this.dataList
        this.tableDatas = this.endList.slice(0, 10) // 假设一页展示5条数据，将首页数据分隔出来
        this.tableRightDatas = this.endList.slice(0, 10)
        this.totalPage = Math.ceil(this.dataList.length / 10)
        this.totalPageRigth = Math.ceil(this.dataList.length / 10)
      }
    },
    //   日期点击
    clickLeftIcon() {
      this.showPanel = true
    },
    // 箭头
    onClickLeft(e) {
      console.log('左边箭头')
      if (e === 1) {
        if (this.page === 1) {
          return
        }
        this.page--
      } else {
        if (this.page >= this.totalPage) {
          return
        }
        this.page++
      }
      this.currentPageChangeHandler(this.page)
    },
    currentPageChangeHandler(page) {
      // 点击页码或者下一页时对相应的数据进行切割
      this.tableDatas = this.endList.slice((page - 1) * 10, page * 10)
    },
    // 开始年
    onClickItem(v) {
      this.startShowYear = v
      this.$emit('beginD', v)
      if (this.startShowYear !== '' && this.endShowYear !== '') {
        if (this.startShowYear <= this.endShowYear) {
          const params = {
            startShowYear: this.startShowYear,
            endShowYear: this.endShowYear,
          }
          this.fillFn(params)
        } else {
          this.$message.warning('开始年度不能大于结束年度')
        }
      }
    },
    // 结束
    beClickItem(v) {
      this.endShowYear = v
      console.log(v, '结束')
      this.$emit('endDate', v)
      if (this.startShowYear !== '' && this.endShowYear !== '') {
        const params = {
          startShowYear: this.startShowYear,
          endShowYear: this.endShowYear,
        }
        this.fillFn(params)
      }
      if (this.startShowYear === '') {
        this.$message.warning('请先选择开始年度')
      }
    },
    fillFn(v) {
      if (v.startShowYear <= v.endShowYear) {
        const params = {
          startShowYear: v.startShowYear,
          endShowYear: v.endShowYear,
          num: 0,
        }
        this.$emit('dateT', params)
        this.showPanel = false //关闭
      } else if (v.startShowYear >= v.endShowYear) {
        this.$message.warning('开始年度不能大于结束年度')
      }
    },
    handleInput(state) {},
    onHoverItem(iYear) {
      console.log(iYear, 'iYear')
    },
    // 右边箭头
    onClickRight(e) {
      console.log('右边箭头')
      if (e === 1) {
        if (this.page === 1) {
          return
        }
        this.page--
      } else {
        if (this.page >= this.totalPageRigth) {
          return
        }
        this.page++
      }
      this.currentPageChangeHandlerFn(this.page)
    },
    currentPageChangeHandlerFn(page) {
      this.tableRightDatas = this.endList.slice((page - 1) * 10, page * 10)
    },
    // icon删除
    clearSelectYear() {
      console.log('珊瑚')
      this.startShowYear = ''
      this.endShowYear = ''
    },

    onHoverIcon() {
      if (this.startShowYear !== '' && this.endShowYear !== '') {
        this.isClearIconShow = true
      } else {
        this.isClearIconShow = false
      }
    },
    lossHoverIcon() {
      this.isClearIconShow = false
    },
    async onFocus() {
      await this.$nextTick()
      this.showPanel = true
    },
    // 右边右侧箭头
    AonClickRightFn() {
      console.log('右边右侧箭头')
    },
  },
}
</script>
<style lang="scss" scoped>
.year-all {
  position: relative;
  width: 400px;

  .el-icon-date {
    width: 18px;
    height: 18px;
  }

  .el-icon-date:hover {
    cursor: pointer;
  }

  .el-range__close-icon {
    display: flex;
    align-items: center;
  }

  .yearPicker {
    input:first-child {
      text-align: right;
    }

    .labelText {
      position: absolute;
      left: 8px;
    }

    background-color: #fff;

    span {
      padding: 0 8px;
      height: 32px;
      line-height: 32px;
    }

    border: 1px solid #eff1f3;
    height: 34px;
    line-height: 34px;
    border-radius: 4px;
    padding: 0 28px 0 8px;
    box-sizing: border-box;
  }

  input {
    width: 60px;
    border: none;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    background-color: transparent;
  }

  input:focus {
    outline: none;
    background-color: transparent;
  }

  .yearPicker:hover {
    border-color: #3e77fc;
  }

  .dateIcon {
    position: absolute;
    right: 16px;
    top: 9px;
    color: #adb2bc;
  }
}
.range_input {
  appearance: none;
  border: none;
  outline: 0;
  padding: 0;
  width: 86px;
  color: #606266;
  line-height: 40px;
  height: 40px;
  margin: 0;
  text-align: center;
  color: #646566;
  font-size: 14px;
}

.float-panel {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.left-panel {
  width: 50%;

  height: 50%;
}
.panel-head {
  font-size: 16px;
  height: 46px;
  display: flex;
}
.year-main {
  display: flex;
}

.year-main:hover {
  color: #2f45ff;
  cursor: pointer;
}
.panel-content {
  font-size: 14px;
  display: flex;
  justify-self: start;
  flex-wrap: wrap;
}
.year-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 32px;
  margin-bottom: 12px;
  margin-right: 4px;
}
.years-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 32px;
  margin-bottom: 12px;
  margin-right: 4px;
}
.year-items:hover {
  cursor: pointer;
  background: #f4f4f7;
  border-radius: 2px;
  color: #333;
}

.right-panel {
  width: 50%;
  padding: 0 16px;
}
.year-item:active {
  background: #409eff;
  border-radius: 2px;
}
.year-item:hover {
  cursor: pointer;
  background: #409eff;
  border-radius: 2px;
  color: #333;
}
.years-item:hover {
  cursor: pointer;
  background: #409eff;

  border-radius: 2px;
  color: #333;
}
.years-items:active {
  background: #409eff;
  border-radius: 2px;
}
.toA {
  display: flex;
  justify-content: space-between;
  .toB {
    display: flex;
    .toC {
      padding-left: 10px;
      padding-right: 15px;
    }
    .toF {
      padding-left: 10px;
      padding-right: 15px;
    }
  }
  .toD {
    margin-right: 10px;
    margin-top: -2px;
  }
}
.toE {
  display: flex;
  padding-top: 10px;
  justify-content: space-around;
}
.toQ {
  display: flex;
  padding-top: 10px;
  justify-content: space-around;
}
</style>