vue 탭 탭 구현(탭 자동 스크롤 초과)
효과 미리 보기 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 태그 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Fastapi websocket 및 vue 3(Composition API)1부: FastAPI virtualenv 만들기(선택 사항) FastAPI 및 필요한 모든 것을 다음과 같이 설치하십시오. 생성main.py 파일 및 실행 - 브라우저에서 이 링크 열기http://127.0.0.1:...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.