解决使用Element Ui的走马灯Carousel时,当内容长度为2时循环方向异常的问题。

问题背景：

使用element ui的走马灯Carousel的时候。发现当轮播的数量为2时，循环操作的方向是两个容器来回切换，而不是单一方向进行循环切换。

解决思路：

当内容数量大于2时，可以正常显示，我们可以直接复制一份当前的数据，进行当前的循环操作，这样就可以解决问题。
但是当我们启用下指示器时，就会出现4个指示器，这样就会出现问题，我们可以判断当前是否是属于第一组数据还是第二组数据，通过class类名，显示或隐藏下方的指示器，该方法只针对两个内容出现的方向问题。

解决方法：

    <div :class="[{ 'loopTwoImg': imgStatus }, { 'loopOneImg': !imgStatus }]">
        <el-carousel @change="carouselChange" indicatorPosition="none" arrow="true" loop="true" indicator-position
            trigger="click">
            <template v-for="item in 2" :key="item">
                <el-carousel-item>
                    <img @click="onOpenActivityPage" src="" />
                </el-carousel-item>
                <el-carousel-item>
                    <img @click="onOpenComputePage" src="" />
                </el-carousel-item>
            </template>
        </el-carousel>
    </div>

<script>
    const state = reactive({
      
      
        imgStatus: true
    })

    const carouselChange = (data) => {
      
      
        if (data == 0 || data == 1) {
      
      
            //当为第一组数据的时候，打开当前的指示器，隐藏第二组数据的指示器
            state.imgStatus = true
        } else {
      
      
            //当为第二组数据的时候，打开当前的指示器，隐藏第一组数据的指示器
            state.imgStatus = false
        }
    }
</script>


<style lang="less" scoped>
    /deep/ .loopOneImg {
      
      
        .el-carousel__indicators {
      
      

            &>li:nth-child(1),
            &>li:nth-child(2) {
      
      
                display: none;
            }
        }
    }

    /deep/ .loopTwoImg {
      
      
        .el-carousel__indicators {
      
      

            &>li:nth-child(3),
            &>li:nth-child(4) {
      
      
                display: none;
            }
        }
    }
</style>