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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了