vue实现tab标签(标签超出自动滚动)
更新时间:2021年5月25日 15:00 点击:2068
当创建的tab标签超出页面可视区域时自动滚动一个tab标签距离,并可手动点击滚动tab标签,实现效果请看GIF图
效果预览GIF图
<template> <div class="main-box"> <button @click="add">添加</button> <div class="main-box-tab"> <i @click="previous"><<</i> <i @click="next">>></i> <div class="main-box-tab-content" ref="tabs"> <div class="main-box-tab-roll"> <div v-for="(item,index) in tabs" :key="index" :class="{'tab-item-action':actionName === item.name ,'tab-item':actionName !== item.name}" @click.stop="clickTab(item.name,index)"> <span>{{item.meta.title}}</span> <i class="el-icon-close" @click.stop="close(item.name)"></i> </div> </div> </div> </div> <div class="main-box-content"> <div>{{actionName}}</div> </div> </div> </template> <script> export default { name: "index", data() { return { tabs: [], moveX: 0, count: 1, unoccupied: 0, tabsCount: 0, actionName: 'test1' } }, watch: { actionName(val) { let len = this.tabs.length // 如有重复数据退出后续函数执行 for (let i = 0; i < len; i++) { if (this.tabs[i].name === val) { this.$nextTick(() => { this.translateX((i + 1 - this.tabsCount) * this.width - this.unoccupied) }) return } } this.tabs.push({ name: `test${this.count}`, meta: { title: `test${this.count}` } }) this.$nextTick(() => { // (总共有多少个tabs - 未偏移时可见的元素个数) * 单个tab标签元素长度 - 被遮挡tab元素的可见部分的宽度 this.translateX((this.tabs.length - this.tabsCount) * this.width - this.unoccupied) }) } }, mounted() { this.tabs.push({ name: `test${this.count}`, meta: { title: `test${this.count}` } }) this.$nextTick(() => { let tabs = this.$refs.tabs let getStyle = getComputedStyle(tabs.children[0].children[0], null) let marginLeft = parseFloat(getStyle.marginLeft.substr(0, getStyle.marginLeft.length - 2)) let marginRight = parseFloat(getStyle.marginRight.substr(0, getStyle.marginRight.length - 2)) // 元素实际宽度 = 元素的宽度 + 外边距 this.width = marginLeft + marginRight + tabs.children[0].children[0].offsetWidth /** * 以下注释计算方式用于理解实现逻辑 **/ // // 可视区域能放入多少个元素 = 可视区域的宽度 / 子元素实际宽度 // let num = tabs.offsetWidth / this.width // // 被遮挡tab元素的可见部分的宽度 = 可见区域的宽度 - (子元素实际宽度 * num转为整数) // this.unoccupied = tabs.offsetWidth - (this.width * parseInt(num)) // 最终精简为取余(得数跟上面的计算是一样的) this.unoccupied = tabs.offsetWidth % this.width // 转为整数 this.tabsCount = parseInt(tabs.offsetWidth / this.width) }) }, methods: { add() { this.count++ this.actionName = `test${this.count}` }, /** * 切换tab标签页 **/ clickTab(name) { if (this.actionName !== name) { this.actionName = name } }, /** * 关闭tab标签页 **/ close(name) { let len = this.tabs.length let jumpName = null if (len > 1) { for (let i = 0; i < len; i++) { if (this.tabs[i].name === name) { this.tabs.splice(i, 1) jumpName = this.tabs[i ? i - 1 : 0].name if (this.actionName !== jumpName && name === this.actionName) { this.actionName = jumpName } this.$nextTick(() => { this.previous() }) return } } } }, /** * 往右偏移 **/ next() { // scrollWidth获取不准确 // 使用this.width * this.tabs.length计算出总长度 let totalWidth = this.width * this.tabs.length this.$nextTick(() => { let dom = this.$refs.tabs // 可视区域 < 滚动区域(滚动区域大于可视区域才可以移动) // 移动距离 + 可视区域 = 滚动区域的宽度(上一次的宽度,当点击时才是实际宽度)< 滚动区域 if (dom.clientWidth < totalWidth && this.moveX + dom.clientWidth < totalWidth) { // this.moveX为0减去空余空间的宽度 this.moveX += this.moveX ? this.width : this.width - this.unoccupied this.translateX(this.moveX) } }) }, /** * 往左偏移 **/ previous() { if (this.moveX > 0) { this.moveX -= this.width this.translateX(this.moveX) } }, /** * 开始移动dom **/ translateX(x) { this.moveX = x < 0 ? 0 : x this.$refs.tabs.children[0].style.transform = `translateX(-${this.moveX}px)` } } } </script> <style lang="scss" scoped> .main-box { height: 500px; width: 500px; padding: 10px 20px 20px 20px; .main-box-tab { position: relative; padding: 10px 20px; overflow: hidden; & > i { position: absolute; cursor: pointer; bottom: 15px; &:nth-child(1) { left: 0; } &:nth-child(2) { right: 0; } } .main-box-tab-content { overflow: hidden; .main-box-tab-roll { transition: transform .5s; display: flex; align-items: center; div { flex-shrink: 0; cursor: pointer; width: 130px; height: 25px; margin: 0 5px; display: flex; align-items: center; justify-content: space-between; span, i { font-size: 12px; } span { margin-left: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } i { margin-right: 10px; } } } } .tab-item { color: #cccccc; background-color: rgba(255, 255, 255, .5); border-radius: 0 1px 0 1px; border: 1px solid #052141; } .tab-item-action { color: #ffffff; background: rgba(0, 180, 255, 0.8); border-radius: 0 1px 0 1px; border: 1px solid #1E2088; } } .main-box-content { height: calc(100% - 70px); padding: 10px; border: 1px saddlebrown solid; background-size: 100% 100%; } } </style>
到此这篇关于vue实现tab标签(标签超出自动滚动)的文章就介绍到这了,更多相关vue tab标签 内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要介绍了vue+高德地图实现地图搜索及点击定位操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-09
- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
- 这篇文章主要介绍了vue cli4.0项目引入typescript的方法,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-17
- 距离 Vue 3.0 正式版发布已经有一段时间了,关于vue3组件库相关的问题还是挺多人感兴趣的,这篇文章主要给大家介绍了关于vue3如何按需加载第三方组件库的相关资料,需要的朋友可以参考下...2021-06-02
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01