vue日期左右可切换组件

基于vue与element-ui封装的可以左右切换的日期组件

<template>
  <div class="calendar-flex">
    <div class="el-icon-arrow-left calendar-arrow" @click="arrowLeft" />
    <div ref="refTotal" class="calendar-date">
      <div
        v-for="(item,index) in dataSource"
        ref="refDate"
        :key="index"
        :class="selectedItem=== (labelName? item[labelName] : item)? 'calendar-item-active':'calendar-item'"
        @click="getSelectedValue(item, index)"
      >{{ labelName?item[labelName]:item }}</div>
    </div>
    <div class="el-icon-arrow-right calendar-arrow" @click="arrowright" />
  </div>
</template>

<script>
export default {
  props: {
    // 传入的数据源
    dataSource: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 默认选中值
    defaultValue: {
      type: String,
      default: ''
    },
    // labelName名称，遍历数组是对象必须配置该值，默认遍历文本
    labelName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      selectedItem: '' // 选中值
    }
  },
  watch: {
    // 默认值变化赋值
    defaultValue: {
      handler() {
        this.selectedItem = this.defaultValue
      },
      immediate: true
    },
    // 监听选中值变化
    selectedItem: {
      handler(val) {
        const index = this.dataSource.findIndex((item) => {
          return this.labelName ? item[this.labelName] === val : item === val
        })
        index < 0 ? this.$emit('selectedData') : this.$emit('selectedData', this.dataSource[index])
      },
      immediate: true
    }
  },
  mounted() {
    const index = this.dataSource.findIndex((item) => {
      return this.labelName ? item[this.labelName] === this.defaultValue : item === this.defaultValue
    })
    if (this.defaultValue) {
      this.$refs.refTotal.scrollLeft = this.$refs.refDate[index].offsetWidth * index
    }
  },
  methods: {
    // 选中值
    getSelectedValue(data, index) {
      this.selectedItem = this.labelName ? data[this.labelName] : data
      this.$refs.refTotal.scrollLeft = this.$refs.refDate[index].offsetWidth * index
    },
    // 左箭头
    arrowLeft() {
      let scrollIndex = this.dataSource.findIndex((item) => {
        return this.labelName ? item[this.labelName] === this.selectedItem : item === this.selectedItem
      })
      if (!this.selectedItem) { // 没有默认值，赋值
        scrollIndex = 0
        this.selectedItem = this.labelName ? this.dataSource[0][this.labelName] : this.dataSource[0]
      }
      if ((this.labelName ? this.dataSource[scrollIndex][this.labelName] : this.dataSource[scrollIndex]) === (this.labelName ? this.dataSource[0][this.labelName] : this.dataSource[0])) return
      scrollIndex--
      this.selectedItem = this.labelName ? this.dataSource[scrollIndex][this.labelName] : this.dataSource[scrollIndex]
      this.$refs.refTotal.scrollLeft = this.$refs.refDate[scrollIndex].offsetWidth * scrollIndex
    },
    // 右箭头
    arrowright() {
      let scrollIndex = this.dataSource.findIndex((item) => {
        return this.labelName ? item[this.labelName] === this.selectedItem : item === this.selectedItem
      })
      if (!this.selectedItem) { // 没有默认值，赋值
        scrollIndex = 0
        this.selectedItem = this.labelName ? this.dataSource[0][this.labelName] : this.dataSource[0]
      }
      if ((this.labelName ? this.dataSource[scrollIndex][this.labelName] : this.dataSource[scrollIndex]) === (this.labelName ? this.dataSource[this.dataSource.length - 1][this.labelName] : this.dataSource[this.dataSource.length - 1])) return
      scrollIndex++
      this.selectedItem = this.labelName ? this.dataSource[scrollIndex][this.labelName] : this.dataSource[scrollIndex]
      this.$refs.refTotal.scrollLeft = this.$refs.refDate[scrollIndex].offsetWidth * scrollIndex
    }
  }
}
</script>

<style lang="scss" scoped>
.calendar-flex {
  display: flex;
  margin: 10px 0;
  .calendar-arrow {
    cursor: pointer;
    color: #409EFF;
    font-size: 18px;
    padding: 10px 20px;
  }
  .calendar-arrow:active {
    transform: scale(0.85);
  }
  .calendar-date {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    .calendar-item {
      padding:10px 20px;
      cursor: pointer;
    }
    .calendar-item:hover {
      background-color:#f8f8f8;
      opacity: 0.8
    }
    .calendar-item-active {
      background-color: #409EFF;
      padding:10px 20px;
      color: #fff;
      cursor: pointer;
    }
  }
  .calendar-date::-webkit-scrollbar {
    display: none;
  }
}
</style>

引用组件支持两种数据源格式

# 基于vue和element-ui,点击左右箭头及选中滚动
基础的用法
#
# selectedData function 选中及当前滚动选中的事件
# defaultValue string 默认选中的值, 可选
# dataSource array 数据源
# labelName string 数据源中的要显示的元素名称
#
dataSource = ['2022-08-01','2022-08-02','2022-08-03','2022-08-04'] dataSource数组中的元素为字符串，可以直接这样使用，不设置默认值，没有选中值，点击左右箭头时会取值数据源中的第一个值
<scroll-arrow 
 @selectedData="selectedData" 
 :data-source="dataSource"
/>
# dataSource 数组元素是对象的用法，此时labelName必须配置
dataSource=[{date:'2022-08-01'},{date:'2022-08-02'},{date:'2022-08-03'},{date:'2022-08-04'}]
<scroll-arrow 
 @selectedData="selectedData" 
 :data-source="dataSource"
 :label-name="date"
/>

效果图如下：