Vue-component | 文字走马灯组件

日常开发中积累了不少可能对一些开发有帮助的简单易用的组件，好记性不如烂笔头，想对过去的一些零零乱乱的东西做一些总结，反省自己的同时也便于思考一些更优的方法，提升下开发思维😉😉😉。
代码传送门（😃感觉有作用的的同学帮忙点下❤️️）

效果截图

先上效果图，滚动展示不同数据。

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	/

后续会持续更新其他一些有用的组件提供参考...