参考了这篇文章,作者思路很清晰,简单做了下修改,蟹蟹作者,链接在此:https://www.jb51.net/css/685357.html#comments

主要思路是利用css属性writing-mode:vertical-lr;通过设定最大字符长度,补零,去循环,然后添加style translate和transition来完成想要的效果;

子组件根据父组件传给的数值,父或者子刷新这个定时器都可以,以下我们的demo将在子组件进行定时刷新;

首先子组件dom结构:

 

 css样式:

 

 然后就是子组件接收父组件传给的值,默认值给0:

 

定义所需数据:

 

 

 

 

初始化的时候执行定时刷新,结束时记得清空定时器;建议定时器放在父组件,这里只是为了展示效果所以放在子组件。

 

 还有就是,父组件传来新的值时,需要触发子组件刷新,这里我们在子组件用watch监听下,执行下相应方法:

 

 父组件调用下并传入相应值就可以了:

 

 

 

  父组件传值有变化时 ,数字会自动滚动到相应位置:动画时间可以自己设定,效果如图所示:

此组件刚发现有个兼容性问题,css样式里的

text-orientation:upright;在safari浏览器中并不生效,曲线救国就是改变dom结构:

 

 就可以了。