當創(chuàng)建的tab標簽超出頁面可視區(qū)域時自動滾動一個tab標簽距離，并可手動點擊滾動tab標簽，實現(xiàn)效果請看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// 如有重復數據退出后續(xù)函數執(zhí)行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/** * 以下注釋計算方式用于理解實現(xiàn)邏輯 **/// // 可視區(qū)域能放入多少個元素 = 可視區(qū)域的寬度 / 子元素實際寬度// let num = tabs.offsetWidth / this.width// // 被遮擋tab元素的可見部分的寬度 = 可見區(qū)域的寬度 - (子元素實際寬度 * 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 // 可視區(qū)域 < 滾動區(qū)域（滾動區(qū)域大于可視區(qū)域才可以移動） // 移動距離 + 可視區(qū)域 = 滾動區(qū)域的寬度（上一次的寬度，當點擊時才是實際寬度）< 滾動區(qū)域 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實現(xiàn)tab標簽(標簽超出自動滾動)的文章就介紹到這了,更多相關vue tab標簽 內容請搜索好吧啦網以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持好吧啦網！