vue 实现一行展示中，如果超出则中间省略号的布局方式

背景：在实际业务开发中，有个场景需要展示一条路线，但路线节点可能会过多，过多时，需要将中间的节点扣出，用省略号来表示。

实现：项目使用vue框架，js实现。

效果：一条路线中，至少要保留首尾2个节点，其他节点放不下则用省略号汇总替换。

图（1）一般情况下的效果：

图（2）只能放收尾2个节点，且末尾节点过长的情况：

图（3）只能放收尾2个节点，且首尾节点都过长的情况：

图（4）只能放收尾2个节点，且开始节点都过长的情况：

（ps: 这种情况下展示效果不是最佳，需要优化，但没想好方法，有好方案的欢迎补充共享）

代码块：

  1 
 16 
 70