组件轮播联动我使用的是 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:;
}
</style>

vue 组件轮播联动的更多相关文章

  1. vue实现轮播效果

    vue实现轮播效果 效果如下:(不好意思,图有点大:) 功能:点击左侧图片,右侧出现相应的图片:同时左侧边框变颜色. 代码如下:(也可以直接下载文件) <!DOCTYPE html> &l ...

  2. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  3. vue 一个轮播的组件

    当我们进行开发的时候,并不是说所有信息都会在写一个组件中 作为项目的老大,我们要去思考每个文件下面需要放什么业务,分的越细.越合理为好 我们在componts文件下新建一个Banner.vue 组件 ...

  4. vue 3d轮播组件 vue-carousel-3d

    开发可视化项目时,需要3d轮播图,找来找去发现这个组件,引用简单,最后实现效果还不错.发现关于这个组件,能搜到的教程不多,就分享一下我的经验. 插件github地址:https://wlada.git ...

  5. Vue编写轮播组件引入better-scroll插件无法正常循环轮播

    临近过年还是发个博客表示一下自己的存在感,这段时间公司突然说想搞小程序,想到这无比巨大的坑就只能掩面而泣,于是乎这段时间在学习小程序开发.关于标题所说的是有老铁问的,我也跟着网上的代码码了一遍然后发现 ...

  6. 跳坑 小程序swiper组件 轮播图片 右边空白问题

    swiper 组件 设置轮播图片时,右侧会出现空白的情况:是因为 swiper组件有默认的 高度和宽度,所以我们在设置图片高度和宽度的同时, 也要为 设置高度和宽度,和高度和宽度样式一样的就可以.

  7. 鸿蒙开源第三方件组件——轮播组件Banner

    目录: 1.功能展示 2.Sample解析 3.Library解析 4.<鸿蒙开源第三方组件>系列文章合集 前言 基于安卓平台的轮播组件Banner(https://github.com/ ...

  8. ⒃bootstrap组件 轮播图 基础案例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. vue+mui轮播图

    mui的轮播图,如果图片是请求来的,直接在html中循环是不会动的. 需要请求完图片之后,在setTimeout方法里,使用slider()方法,这样才会动 而且mui的轮播图,有点坑的,需要重复最后 ...

随机推荐

  1. 用Python爬虫对豆瓣《敦刻尔克》影评进行词云展示

    最近很想看的一个电影,去知乎上看一下评论,刚好在学Python爬虫,就做个小实例. 代码基于第三方修改 原文链接  http://python.jobbole.com/88325/#comment-9 ...

  2. 关于form的action路径填写

    一:可以是相对路径: 1.action="<%=request.getContextPath() %>/html/index.html"  <%=request. ...

  3. 笨办法学Python(十七)

    习题 17: 更多文件操作 现在让我们再学习几种文件操作.我们将编写一个 Python 脚本,将一个文件中的内容拷贝到另外一个文件中.这个脚本很短,不过它会让你对于文件操作有更多的了解. from s ...

  4. 虚拟机的NAT模式连接centos7配置静态IP连接外网

    小小的配置,各种五花八门的介绍. 1.打开VMWare->编辑->虚拟网络编辑器->点击更改设置 2.选中VMnet8->取消使用本地DHCP服务将IP地址分配给虚拟机-> ...

  5. java注解总结-关联信息-关联结构

    java的注解是一种可配置信息: 这些信息直接依附在功能代码之上: * 元注解@Target,@Retention,@Documented,@Inherited * * @Target 表示该注解用于 ...

  6. DP上课覆盖知识点,POJ(1513)

    题目链接:http://poj.org/problem?id=1513 解题报告: 思路: 知识点从第二个开始扫,递推表达式是:minlec[i]=min(minlec[k])+1,并且要保证,tim ...

  7. Jmeter启动错误

    错误一 1 apache-jmeter-2.13\bin>jmeter 'findstr' 不是内部或外部命令,也不是可运行的程序 或批处理文件. Not able to find Java e ...

  8. 用js给元素加css

    1.如果是没有CSS文件,或者要修改的不在CSS文件里,那么: document.getElementById('DIV标签的ID').style.属性='属性值'; 这样就可以了.2.如果,样式是写 ...

  9. p2597 灾难

    我的思路 代码: #include<cstdio> #include<iostream> #include<algorithm> #include<vecto ...

  10. barnes-hut算法 && Fast Multipole Methods算法

    barnes-hut算法 http://arborjs.org/docs/barnes-hut Fast Multipole Methods算法 http://www.umiacs.umd.edu/~ ...