vue指定内容横向滚动组件

组件名称rollList.vue

下面是组件的完整代码

<template>
  <div class="roll_box">
    <div
      class="left_btn_icon btn_icon"
      :class="{'left_opacity': !showLeftBtn}"
      @click="scrollLeft()"
    >
      <slot name="left">
        <a-icon type="caret-left" />
      </slot>
    </div>
    <div class="main_roll" :ref="`${namespace}MainRoll`">
      <slot name="default"></slot>
    </div>
    <div
      class="right_btn_icon btn_icon"
      :class="{'left_opacity': !showRightBtn}"
      @click="scrollRight()"
    >
      <slot name="right">
        <a-icon type="caret-right" />
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  inject: ['namespace'],
  components: {},
  props: {},
  name: 'RollList',
  data () {
    return {
      dataBar: null,
      showRightBtn: false,
      showLeftBtn: false
    }
  },
  watch: {
    namespace: {
      handler (val) {
        this.$nextTick(() => {
          this.clearRoll()
        })
      },
      immediate: true,
      deep: true
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.clearRoll()
    })
  },
  created () {
  },
  methods: {
    clearRoll (left) {
      this.$nextTick(() => {
        this.dataBar = this.$refs[`${this.namespace}MainRoll`]
        // 先复位滚动
        this.dataBar.scrollTo({
          left: left || 0,
          behavior: 'smooth'
        })
        setTimeout(() => {
          this.$set(this, 'showRightBtn', this.dataBar.scrollLeft < (this.dataBar.scrollWidth - this.dataBar.clientWidth))
          this.$set(this, 'showLeftBtn', this.dataBar.scrollLeft > 0)
        }, 500)
      })
    },
    scrollLeft () {
      let left = this.dataBar.scrollLeft - 300
      this.clearRoll(left)
    },
    scrollRight () {
      let left = this.dataBar.scrollLeft + 300
      this.clearRoll(left)
    }
  }
}
</script>
<style scoped lang='scss'>
.roll_box {
  display: flex;
  width: 100%;
  align-items: center;

  .btn_icon {
    z-index: 999;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 1;
    transition: all 0.3s;
    background: #0e88eb;
    border-radius: 50%;
    justify-content: center;
    color: #ffffff;

    &:hover {
      background: #58b1f8;
    }

    // 点击时的样式
    &:active {
      background: #ced6de;
    }
  }

  .right_btn_icon {
  }

  .left_btn_icon {

  }

  .left_opacity {
    opacity: 0;
    transition: all 0.3s;
  }

  .main_roll {
    width: 100%;
    display: -webkit-box;
    overflow: hidden;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.3s;
    margin-bottom: 10px;
    margin-left: -10px;
    min-height: 200px;
  }
}

</style>

在页面中使用该组件

<template>
  <!--  <div class="roll_box">-->
  <roll-list :ref="componentsName" :id="componentsName">
    <!-- 这里面的内容自定义即可 -->
    <template #default>
      <div class="li-item" v-for="(item, index) in processList" :key="index">
        <div class="top_circle" v-if="showHeader">
          <div class="circle" :style="{borderColor: item.color}"></div>
          <div class="circle_gun"></div>
        </div>
        <div class="card_item">
          <div class="font_title">
            <div>{
  
  { item.stageName }}</div>
          </div>
          <div class="font_process" :style="{color: item.color}">{
  
  { item.total + '%' }}</div>
          <div class="card_font">状态： <span :style="{color:item.color}">{
  
  { item.status }}</span></div>
          <div class="card_font">当前进度：<span
            :style="{color: item.color}">{
  
  { item.stageProcess ? item.stageProcess.toFixed(2) + '%' : 0 + '%'
          }}</span></div>
          <div class="card_font">预计开始： {
  
  { item.startTime }}</div>
          <div class="card_font">预计结束： {
  
  { item.endTime }}</div>
          <div class="card_font">实际结束： {
  
  { item.actualEndTime }}</div>
        </div>
      </div>
    </template>
  </roll-list>
  <!--  </div>-->
</template>
<script>
import moment from 'moment'

export default {
  components: {
    rollList: () => import('@/components/public/rollList.vue')
  },
  props: {
    processList: {
      type: Array,
      default: () => {
        return []
      }
    },
    showHeader: {
      type: Boolean,
      default: false
    },
    componentsName: {
      type: String,
      default: ''
    }
  },
  // name: this.componentsName,
  name: 'StageRoll',
  provide () {
    return {
      namespace: this.componentsName
    }
  },
  data () {
    return {}
  },
  watch: {
    processList: {
      handler (val) {
        this.dealStage(val)
      },
      deep: true,
      immediate: true
    }
  },
  created () {

  },
  methods: {
    clearRoll (componentsName) {
      this.$refs[componentsName].clearRoll()
      let dataBar = this.$refs[componentsName]
      console.log(dataBar.scrollLeft, 'scrollLeft')
      console.log(dataBar.scrollWidth, 'scrollWidth')
      console.log(dataBar.clientWidth, 'clientWidth')
    },
    dealStage (data) {
      let nowDate = new Date(moment().format('YYYY-MM-DD'))
      for (let item of data) {
        let stageProcess = Number(item.stageProcess || 0)
        let startTime = item.actualStartTime ? new Date(item.actualStartTime) : new Date(item.startTime)
        let endTime = item.actualEndTime ? new Date(item.actualEndTime) : new Date(item.endTime)
        // if (nowDate < new Date(item.actualStartTime)) {

        // 当前日期小等于预计结束日期
        // 进度为0  ==> 未开始
        // 进度为100  ==> 已完成
        // 进度不为0 且不为100  ==> 进行中
        // 当前日期大于预计结束日期
        // 进度不为100 ==> 超期未完成
        if (stageProcess < 100) {
          if (nowDate < startTime) {
            item.status = '未开始'
            item.color = '#DFE5EE'
          } else if (nowDate <= endTime) {
            item.status = '进行中'
            item.color = '#4CA6FF'
          } else {
            item.status = `超期${Math.ceil((nowDate - new Date(item.endTime)) / 86400000)}天未完成`
            item.color = '#FF7575'
          }
        } else {
          // 进度为100;
          // 最后报工日期大于预计结束日期 ==> 超期已完成;
          // 最后报工日期小于预计结束日期 ==> 已完成
          if (!item.actualEndTime) {
            item.status = `超期${Math.ceil((nowDate - new Date(item.endTime)) / 86400000)}天未完成`
            item.color = '#FF7575'
          } else if (item.actualEndTime && new Date(item.actualEndTime) > new Date(item.endTime)) {
            item.status = '超期已完成'
            item.color = '#FBA85F'
          } else if (item.actualEndTime && new Date(item.actualEndTime).getTime() <= new Date(item.endTime).getTime()) {
            item.status = '已完成'
            item.color = '#44D26E'
          }
        }
      }
    }
  }
}
</script>
<style scoped lang='scss'>
.li-item {
  width: 12%;
  margin: 5px 10px;
  font-size: 12px;
  min-width: 174px;

  .top_circle {
    display: flex;

    .circle {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: none;
      border: 4px solid red;
      margin: 0 10px 10px 0;
    }

    .circle_gun {
      min-width: 140px;
      width: 10%;
      height: 4px;
      background-color: #eaedf1;
      margin: 10px 0 0 0;
    }

  }

  .card_item {
    color: rgb(32, 32, 32);
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    box-shadow: 2px 2px 8px 3px #efefef;
    border-radius: 5%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease; // 添加过渡效果

    .font_process {
      margin-left: 40%;
      font-weight: 600;
      font-size: 14px;
    }

    .font_title {
      font-size: 14px;
      text-align: center;
      font-weight: 600;
    }

    .card_font {
      margin: 2px 0;
    }

    &:hover {
      // 鼠标放上突出效果
      transform: scale(1.1); // 放大 5%
      box-shadow: 2px 2px 8px 3px #efefef;
      border-radius: 5%;
      cursor: pointer;
    }

    // 悬停时的样式
    &.hovered {
      transform: scale(1.05); // 放大 5%
      box-shadow: 2px 2px 8px 3px #efefef;
      border-radius: 5%;
      cursor: pointer;
    }
  }
}
</style>