一、背景介绍
在项目开发的新一轮需求中希望将过去做好的echarts图表组件进行复用轮播，过去我们使用vue-seamless-scroll无缝滚动插件完成列表内容轮播，实现滚动新闻的效果。但是这一插件貌似难以使用在组件的轮播上，好在机bai缘du巧yi合xia让我发现了Vue 提供了 transition 的封装组件，用以给任何元素和组件添加进入、离开过渡效果，这不正好与本次需求不谋而合嘛。
二、查看源码
在Vue.js文档中可以看到如下关于多个组件的过渡的源码：
<template>
<transition name="component-fade" mode="out-in">
<component v-bind:is="view"></component>
</transition>
</template>
<script>
new Vue({
el: '#transition-components-demo',
data: {
view: 'v-a'
},
components: {
'v-a': {
template: '<div>Component A</div>'
},
'v-b': {
template: '<div>Component B</div>'
}
}
})
</script>
<style>
.component-fade-enter-active, .component-fade-leave-active {
transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
opacity: 0;
}
</style>
效果是：选择单选框，页面显示对应的组件，但是如此操作后却出现关于组件引入和使用的报错，并且此时还是手动操作，要实现自动轮播还需要稍微进行修改。
三、改写运用
于是我进行了如下的改写：
<template>
<transition name="slide">
<div v-if="id === 0" key="0">
<e-charts :options="chartOption" />
</div>
<div v-else-if="id === 1" key="1">
<e-charts :options="chartOption" />
</div>
<div v-else-if="id === 2" key="2">
轮播序列中的第三个组件
</div>
<div v-else-if="id === 3" key="3">
轮播序列中的第四个组件
</div>
</transition>
<ul style="display: flex;">
<li @click="id = 0">第一个</li>
<li @click="id = 1">第二个</li>
<li @click="id = 2">第三个</li>
<li @click="id = n">第n个</li>
</ul>
</template>
<script>
//照常引入所需组件，如下：
import Component from '../'
export default {
components: {
Component
}
}
</script>
此时便不会出现组件引入与使用报错的问题，下一步实现自动轮播效果。
我的改写方法如下：
为实现组件轮播，那么transition组件里面就有不止一个元素了，所以必须将 transition 改成 transition-group
<template >
<div class="chart-wrapper">
<transition-group name="slide" mode="out-in">
<div v-if="id === 0" key="0">
<component0 />
<!--添加第一个需要轮播的组件，下同-->
</div>
<div v-if="id === 1" key="1">
<component1 />
</div>
<div v-if="id === 2" key="2">
<component2 />
</div>
<div v-if="id === 3" key="3">
<component3 />
</div>
</transition-group>
</div>
</template>
<script>
//引入所需组件如下，每个组件里都有若干个echarts图表
import Component from '../'
export default {
components: {
Component
},
data() {
return {
id: 0,
}
},
mounted() {
//设置setInterval定时调用使得id不停切换
setInterval(() => {
this.changeId()
}, 3000)//设置切换间隔
},
methods: {
//添加自动切换id的方法
changeId() {
if (this.id == 0 || this.id == 1 || this.id == 2) {
setTimeout(() => {
this.id++
}, 1000)
} else {
setTimeout(() => {
this.id = 0
}, 1000)
}
},
},
}
</script>
因为 transition-group 和 transition 的原理基本上是一样的，所以只需要把 transition 改成 transition-group，其它地方无须改动。
运行起来后，发现 echarts 图表组件的轮播效果正常了！但是由于echarts是数据驱动的，所以要有给力的数据载入速度来保证流畅的轮播效果。