當創建的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 ref='tabs'><div class='main-box-tab-roll'> <div v-for='(item,index) in tabs' :key='index' : @click.stop='clickTab(item.name,index)'><span>{{item.meta.title}}</span><i @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.tabslet 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.lengthlet jumpName = nullif (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.lengththis.$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.unoccupiedthis.translateX(this.moveX) }}) }, /** * 往左偏移 **/ previous() {if (this.moveX > 0) { this.moveX -= this.width this.translateX(this.moveX)} }, /** * 開始移動dom **/ translateX(x) {this.moveX = x < 0 ? 0 : xthis.$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標簽 內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！