<!-- ?-->
<template>
? <div>
? ? <div class="ProgressBoxTool" v-if="progressList && progressList.length">
? ? ? <div class="processBox">
? ? ? ? <div :class="currentClickNumber > 0 ? 'arrow' : 'arrow arrowOpacity'" @click="fnPrev()">
? ? ? ? ? <img :src="arrowL" alt="" />
? ? ? ? </div>
? ? ? ? <div class="fixedBox" :ref="`fixedBox`">
? ? ? ? ? <div
? ? ? ? ? ? class="centerScroll"
? ? ? ? ? ? :style="
? ? ? ? ? ? ? `width:${signleWidth *
? ? ? ? ? ? ? ? progressList.length}px;transform:translate(${scrollResultWidth}px,0);transition:1s;`
? ? ? ? ? ? "
? ? ? ? ? >
? ? ? ? ? ? <div
? ? ? ? ? ? ? class="signleTab"
? ? ? ? ? ? ? v-for="(itemP, indexP) in progressList"
? ? ? ? ? ? ? :key="indexP + 'progress'"
? ? ? ? ? ? >
? ? ? ? ? ? ? <div class="leftIcon">
? ? ? ? ? ? ? ? <img class="pregressIcon" :src="icon" alt="" />
? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? <!-- 最后一個不展示箭頭 -->
? ? ? ? ? ? ? <img
? ? ? ? ? ? ? ? v-if="progressList.length > indexP + 1"
? ? ? ? ? ? ? ? :src="iconArrow"
? ? ? ? ? ? ? ? alt=""
? ? ? ? ? ? ? ? class="arrowSquare"
? ? ? ? ? ? ? />
? ? ? ? ? ? </div>
? ? ? ? ? </div>
? ? ? ? </div>

? ? ? ? <div :class="noScrollRight ? 'arrow' : 'arrow arrowOpacity'" @click="fnNext(activeName)">
? ? ? ? ? <img :src="arrowR" alt="" />
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
import arrowL from '@/assets/images/emergency/arrowL.png';
import arrowR from '@/assets/images/emergency/arrowR.png';
import icon from '@/assets/images/emergency/icon.png';
import iconArrow from '@/assets/images/emergency/iconArrow.png';
export default {
? components: {},
? data() {
? ? return {
? ? ? progressList: [
? ? ? ? { type: '1' },
? ? ? ? { type: '2' },
? ? ? ? { type: '1' },
? ? ? ? { type: '2' },
? ? ? ? { type: '1' },
? ? ? ? { type: '2' },
? ? ? ? { type: '1' },
? ? ? ? { type: '2' },
? ? ? ? { type: '1' },
? ? ? ? { type: '2' }
? ? ? ],
? ? ? arrowL,
? ? ? arrowR,
? ? ? icon,
? ? ? iconArrow,
? ? ? currentProgressId: '',
? ? ? scrollResultWidth: 0, //transform滾動的距離
? ? ? signleWidth: 215, //單個流程的寬度
? ? ? activeName: 0,
? ? ? currentClickNumber: 0,
? ? ? noScrollRight: true
? ? };
? },
? created() {
? ? this.$nextTick(() => {
? ? ? setTimeout(() => {
? ? ? ? this.initgoRightArrow();
? ? ? });
? ? });
? },
? methods: {
? ? //初始化判斷是否可以向右滾動
? ? initgoRightArrow() {
? ? ? const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
? ? ? const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的個數
? ? ? //如果最后一個流程圖標已經展示出來，則停止滾動
? ? ? if (this.currentClickNumber + canNumber >= this.progressList.length) {
? ? ? ? this.noScrollRight = false;
? ? ? ? return;
? ? ? }
? ? },
? ? //點擊上一個
? ? fnPrev() {
? ? ? //如果右點擊的次數大于0，才可以左滾
? ? ? if (this.currentClickNumber > 0) {
? ? ? ? this.currentClickNumber -= 1;
? ? ? ? this.noScrollRight = true;
? ? ? ? this.fnScrollWidth('reduce');
? ? ? } else {
? ? ? ? return false;
? ? ? }
? ? },
? ? //點擊下一個
? ? fnNext() {
? ? ? const currentScrollWidth = this.$refs[`fixedBox`].clientWidth;
? ? ? const canNumber = Math.floor(currentScrollWidth / this.signleWidth); //可以放下的個數
? ? ? //如果最后一個流程圖標已經展示出來，則停止滾動
? ? ? if (this.currentClickNumber + canNumber >= this.progressList.length) {
? ? ? ? return;
? ? ? }
? ? ? //說明放不下有滾動條
? ? ? if (this.progressList.length > canNumber) {
? ? ? ? this.currentClickNumber += 1;
? ? ? ? if (this.currentClickNumber + canNumber >= this.progressList.length) {
? ? ? ? ? this.noScrollRight = false;
? ? ? ? }
? ? ? ? this.fnScrollWidth('add');
? ? ? }
? ? },
? ? //translate的寬度
? ? fnScrollWidth(type) {
? ? ? let result = 0;
? ? ? if (type === 'reduce') {
? ? ? ? result = 215;
? ? ? } else if (type === 'add') {
? ? ? ? result = -215;
? ? ? } else {
? ? ? ? result = 0;
? ? ? }
? ? ? this.scrollResultWidth += result;
? ? },
? }
};
</script>
<style lang="scss" scoped>
//中間的時間發展部分
.processBox {
? display: flex;
? align-items: center;
? justify-content: space-between;
? .arrow {
? ? width: 60px;
? ? cursor: pointer;
? }
? .arrowOpacity {
? ? cursor: default;
? ? opacity: 0.4;
? }
? .fixedBox {
? ? flex: 1;
? ? overflow: hidden;
? }
? .centerScroll {
? ? // flex: 1;
? ? box-sizing: border-box;
? ? padding: 20px 0;
? ? white-space: nowrap;
? ? // width: calc(100% - 120px);
? ? // overflow-x: auto;
? ? .signleTab {
? ? ? width: 215px;
? ? ? position: relative;
? ? ? display: inline-block;
? ? ? .leftIcon {
? ? ? ? width: 150px;
? ? ? ? text-align: center;
? ? ? ? cursor: pointer;
? ? ? ? & > .pregressIcon {
? ? ? ? ? width: 60px;
? ? ? ? ? height: 60px;
? ? ? ? }
? ? ? }
? ? ? & > .arrowSquare {
? ? ? ? position: absolute;
? ? ? ? top: 25px;
? ? ? ? right: 0;
? ? ? }
? ? }
? }
}
</style>