日常开发中积累了不少可能对一些开发有帮助的简单易用的组件，好记性不如烂笔头，想对过去的一些零零乱乱的东西做一些总结，反省自己的同时也便于思考一些更优的方法，提升下开发思维😉😉😉。
代码传送门（😃感觉有作用的的同学帮忙点下❤️️）
效果截图
先上效果图，滚动展示不同数据。
Carousel
组件结构
需要传递一个指定格式的数组作为内容
<j-carousel :dataList=[ 'PM:2.5 u/g', 'CO2:30 m3/e', '湿度:30 d/m3' ] />
核心代码
<template>
<div class="carousel-wrap">
<span>空气质量</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改成动画持续时间
}
},
mounted () {
this.startMove()
},
beforeDestroy () {
clearTimeout(this.timer)
}
}
</script>
关键点
处理自定义组件，一定要对vue中的传值比较清晰了解，这里就不一一列举。在这里主要使用的一些技术包括：
| 技术 | 概述 | 备注 |
|---|---|---|
| props传值 | 父级传子级 | / |
| setTimeout | 开启计时，文字循环展示 | / |
| Vue过渡动画 | .slide-enter-active,.slide-leave-active,.slide-enter,.slide-leave-to | / |
后续会持续更新其他一些有用的组件提供参考...
