Vue-component | 文字走马灯组件

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

效果截图

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


Carousel

组件结构

需要传递一个指定格式的数组作为内容

  

核心代码



关键点


处理自定义组件,一定要对vue中的传值比较清晰了解,这里就不一一列举。在这里主要使用的一些技术包括:

技术 概述 备注
props传值 父级传子级 /
setTimeout 开启计时,文字循环展示 /
Vue过渡动画 .slide-enter-active,.slide-leave-active,.slide-enter,.slide-leave-to /

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

你可能感兴趣的:(Vue-component | 文字走马灯组件)