vue 组件轮播联动

Posted 2020-11-11 土豆儿哥

组件轮播联动我使用的是 el-carousel 组件，具体代码如下：

<el-carousel trigger="click" :interval="3000" arrow="never" @change="test">
        <el-carousel-item v-for="item in 4" :key="item">
            <div class="row-item row-city" style="height: 550px" v-if="item === 1">
                <div class="item">
                    <div class="item-hd">
                        <h3>
                            <span>城市分布</span>
                        </h3>
                    </div>
                    <div class="item-bd">
                        <p>{{sxPercentage}}</p>
                        <p>{{maxDistanceName}}</p>
                        <div class="paihang" id="cityDisChartsId" style="height:400px; width:500px"></div>
                    </div>
                </div>
            </div>
            <div class="row-item row-city" style="height: 550px" v-if="item === 2">
                <div class="item">
                    <div class="item-hd">
                        <h3>
                            <span>成功率分布</span>
                        </h3>
                    </div>
                    <div class="item-bd">
                        <p>{{sxSucRateMaxNum}}</p>
                        <p>{{sxSucRateMaxCity}}成功率最高</p>
                        <div class="paihang" id="citySucChartsId" style="height:400px; width:500px"></div>
                    </div>
                </div>
            </div>
            <div class="row-item row-city" style="height: 550px" v-if="item === 3">
                <div class="item">
                    <div class="item-hd">
                        <h3>
                            <span>耗时分布</span>
                        </h3>
                    </div>
                    <div class="item-bd">
                        <p>{{sxAvgDurMinNum}}</p>
                        <p>{{sxAvgDurMinCity}}平均验证耗时最短</p>
                        <div class="paihang" id="cityDurChartsId" style="height:400px; width:500px"></div>
                    </div>
                </div>
            </div>
        </el-carousel-item>
</el-carousel>        

 

下面就可以通过轮播的change事件传递参数到父组件，判断轮播的参数变化而进行相应的过渡

export default {
        data() {
            return {
                pageIndex: 1
            }
        },
        methods: {
            test (e) {
                this.pageIndex = e;
                let setData = e;
                this.$emit(‘transferData‘, setData);
            }
        },
        watch: {
            //解决离开当前标签页再次进入时轮播联动无法同步问题
            ‘pageIndex‘: (val) => {
                if (val === 0) {
                    let $chinaMap = jQuery("#chinaMapId");
                    if (!$chinaMap.attr("_echarts_instance_")) {
                        this.myChart = echarts.init($chinaMap[0]);
                        window.addEventListener("resize", () => {
                            this.myChart.resize();
                        });
                        let optionChina = store.state.dataTv.chinaMapOption;
                        this.myChart.setOption(optionChina);
                    }
                } else {
                    let $sxMap = jQuery("#sxMapId");
                    if (!$sxMap.attr("_echarts_instance_")) {
                        this.mySxMapChart = echarts.init($sxMap[0]);
                        window.addEventListener("resize", () => {
                            this.mySxMapChart.resize();
                        });
                        let optionSx = store.state.dataTv.sxMapOption;
                        this.mySxMapChart.setOption(optionSx);
                    }
                }
            }
        }
}

 

 

父组件接收子组件传递的轮播参数，进行相应联动

<div>
    　<div class="col-lg-6">
           //联动组件淡入淡出
            <transition name="slide-fade">
                <tmpEcharts v-if="mapShow"></tmpEcharts>
            </transition>
            <transition name="slide-fade">
                <szEchart v-if="!mapShow"></szEchart>
            </transition>
      </div>
       <div class="col-lg-3 right">
            <cityDistribution @transferData="getDate"></cityDistribution>
       </div>
</div>

 

export default {
        data() {
           return{
               mapShow: true
           }
        },
        methods: {
            getDate(setData) {
                //  0 -> 中国地图，1,2,3 -> 山西省地图
                if (setData === 0) {
                    this.mapShow = true;
                } else {
                    this.mapShow = false;
                }
            }
        },
}

 

<style>
    /* 可以设置不同的进入和离开动画 */
    /* 设置持续时间和动画函数 */
    .slide-fade-enter-active {
        transition: all .3s ease;
    }
    .slide-fade-leave-active {
        transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>