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

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

实现:项目使用vue框架,js实现。

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

图(1)一般情况下的效果:

 

 

图(2)只能放收尾2个节点,且末尾节点过长的情况:

 

图(3)只能放收尾2个节点,且首尾节点都过长的情况:

 

图(4)只能放收尾2个节点,且开始节点都过长的情况:

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

 

 

 

代码块:

复制代码
  1 <template lang="pug">
  2 .employeeList
  3   .box-wrap
  4     .list(:class="{'list_flex':list.length===2}")
  5       .item(v-for="(item,index) in list") 
  6         span.text {{item}}
  7         i.el-icon-right(v-if="index!==list.length-1")
  8         // 插入
  9         el-tooltip(v-if="index === insertIndex" effect="dark" placement="bottom")      
 10           .insert
 11             span {{"··· ( "+insertList.length+" )"}}
 12             i.el-icon-right
 13           .insertList(slot="content")
 14             .one(v-for="one in insertList") {{one}}
 15 </template>
 16 <script>
 17 export default {
 18   data() {
 19     return {
 20       list: [
 21         "我第一个超级长***demo名demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称称1",
 22         // "demo名称名称名称名称名称名称1",
 23         "demo名称名称名称名称名称名称2",
 24         "demo名称名称名称名称名称名称3",
 25         "demo名称名称名称名称名称名称4",
 26         "demo名称5",
 27         "de6",
 28         "demo名称名称名称名称名称名称7",
 29         "demo名称名称名称名称名称名称8",
 30         "demo名称名称名称名称名称名称9",
 31         "demo名称名称名称名称名称名称10",
 32         "demo名称名称名称名称名称名称11",
 33         "demo名称名称名称名称名称名称12",
 34         "demo名称名称名称名称名称名称13",
 35         // "我最后一个超级长*****demo名称名称名称名称名称名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称demo名称13",
 36       ],
 37       insertIndex: 0,
 38       insertList: [],
 39     };
 40   },
 41   mounted() {
 42     this.deal();
 43   },
 44   methods: {
 45     deal() {
 46       let boxWidth = this.$el.querySelector(".box-wrap").offsetWidth - 32;
 47       let listWidth = this.$el.querySelector(".list").scrollWidth;
 48       if (listWidth > boxWidth) {
 49         let index = this.list.length - 2; // 倒数第二个
 50         if (index < 1) {
 51           return;
 52         }
 53         this.insertIndex = index - 1;
 54         this.insertList.unshift(this.list[index]);
 55         this.list.splice(index, 1);
 56         setTimeout(() => {
 57           let newListWidth = this.$el.querySelector(".list").scrollWidth;
 58           if (newListWidth > boxWidth) {
 59             this.deal();
 60           }
 61         });
 62       } else {
 63         console.log(this.insertList, this.list);
 64         return;
 65       }
 66     },
 67   },
 68 };
 69 </script>
 70 <style lang="scss" scoped>
 71 /deep/ * {
 72   box-sizing: border-box;
 73 }
 74 * {
 75   box-sizing: border-box;
 76 }
 77 .employeeList {
 78   background: #fff;
 79   height: 100%;
 80   .box-wrap {
 81     width: 100%;
 82     padding: 0 16px;
 83     .list {
 84       display: inline-block;
 85       overflow: hidden;
 86       white-space: nowrap;
 87       .item {
 88         line-height: 32px;
 89         font-size: 14px;
 90         display: inline-block;
 91         .el-icon-right {
 92           margin: 0 8px;
 93         }
 94         .insert {
 95           display: inline-block;
 96         }
 97       }
 98       &.list_flex {
 99         display: inline-flex;
100         width: 100%;
101         overflow: hidden;
102         .item {
103           display: inline-flex;
104           overflow: hidden;
105           align-items: center;
106           // &:first-child {
107           //   flex: 1;
108           // }
109           &:last-child {
110             flex: 1;
111             min-width: 40%;// 这个是导致只有收尾节点,末尾节点不够长,后面空白一段,展示效果不是最佳的原因
112           }
113           .text {
114             overflow: hidden;
115             text-overflow: ellipsis;
116           }
117         }
118       }
119     }
120   }
121 }
122 </style>
复制代码

 

posted @   蛙仔  阅读(1040)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示