日常開發(fā)中積累了不少可能對一些開發(fā)有幫助的簡單易用的組件尊勿，好記性不如爛筆頭撮竿，想對過去的一些零零亂亂的東西做一些總結(jié)泉手，反省自己的同時(shí)也便于思考一些更優(yōu)的方法铣口，提升下開發(fā)思維??????滤钱。
代碼傳送門（??感覺有作用的的同學(xué)幫忙點(diǎn)下???）
效果截圖
先上效果圖，滾動展示不同數(shù)據(jù)脑题。
Carousel
組件結(jié)構(gòu)
需要傳遞一個指定格式的數(shù)組作為內(nèi)容
<j-carousel :dataList=[ 'PM:2.5 u/g', 'CO2:30 m3/e', '濕度:30 d/m3' ] />
核心代碼
<template>
<div class="carousel-wrap">
<span>空氣質(zhì)量</span>
<div class="textBox">
<transition name="slide">
<p class="text" :key="text.id">{{text.val}}</p>
</transition>
</div>
</div>
</template>
<script>
export default {
name: 'j-carousel',
components: {},
data () {
return {
number: 0,
timer: 0
}
},
props: {
dataList: Array
},
computed: {
text () {
return {
id: this.number,
val: this.dataList[this.number]
}
}
},
watch: {},
methods: {
startMove () {
// eslint-disable-next-line
this.timer = setTimeout(() => {
if (this.number === this.dataList.length - 1) {
this.number = 0
} else {
this.number += 1
}
this.startMove()
}, 4000) // 滾動不需要停頓則將2000改成動畫持續(xù)時(shí)間
}
},
mounted () {
this.startMove()
},
beforeDestroy () {
clearTimeout(this.timer)
}
}
</script>
關(guān)鍵點(diǎn)
處理自定義組件件缸，一定要對vue中的傳值比較清晰了解，這里就不一一列舉叔遂。在這里主要使用的一些技術(shù)包括：
| 技術(shù) | 概述 | 備注 |
|---|---|---|
| props傳值 | 父級傳子級 | / |
| setTimeout | 開啟計(jì)時(shí)他炊，文字循環(huán)展示 | / |
| Vue過渡動畫 | .slide-enter-active,.slide-leave-active,.slide-enter,.slide-leave-to | / |
后續(xù)會持續(xù)更新其他一些有用的組件提供參考...
