一、背景介紹
在項目開發的新一輪需求中希望將過去做好的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是數據驅動的，所以要有給力的數據載入速度來保證流暢的輪播效果。