<template>
<div class="tab-menu-wrapper">
<div class="btn" @click="handlePre($event)"><</div>
<div class="tab-menu-block" ref="tabmeunwrap">
<div class="tab-menu-inner" ref="tabmeun">
<div @click="currInd=index" :class="['item',{'active':currInd==index}]" v-for="(item, index) in testList" :key="index">
{{ item + '' + index }}
</div>
</div>
</div>
<div class="btn" @click="handleNext">></div>
</div>
</template>
<script lang="ts" setup>
import {
ref,
toRefs,
watch,
reactive,
computed,
onMounted,
getCurrentInstance
} from 'vue';
const testList: any = ref();
const currInd = ref(0);
testList.value = Array(30).fill('测试测试测认识');
const changeMenuTab = (arg: any) => {
currInd.value = arg;
};
const handlePre = (e: any) => {
console.log(e);
if (currInd.value > 0) {
currInd.value--;
getLocInfo();
}
};
const handleNext = () => {
if (currInd.value < testList.value.length - 1) {
currInd.value++;
getLocInfo();
}
};
let currentInstance: any = getCurrentInstance();
const getLocInfo = () => {
const left = currentInstance.ctx.$refs.tabmeun.querySelectorAll(
"div[class='item active']"
)[0].offsetLeft;
const width = currentInstance.ctx.$refs.tabmeun.querySelectorAll(
"div[class='item active']"
)[0].offsetWidth;
const all = left + width;
const wrapWidth = currentInstance.ctx.$refs.tabmeunwrap.offsetWidth;
if (all - wrapWidth > 0) {
const px = wrapWidth - all - 130 + 'px';
console.log(px);
currentInstance.ctx.$refs.tabmeun.style.left = px;
} else if (left < wrapWidth) {
currentInstance.ctx.$refs.tabmeun.style.left = '0px';
}
};
</script>
<style lang="less" scoped>
.tab-menu-wrapper {
display: flex;
.btn {
width: 40px;
height: 40px;
line-height: 40px;
color: #666;
font-size: 20px;
flex-shrink: 0;
text-align: center;
&:hover{
cursor: pointer;
}
}
.tab-menu-block{
flex: auto;
overflow: hidden;
display: flex;
flex-wrap: nowrap;
position: relative;
height: 40px;
line-height: 40px;
.tab-menu-inner{
display: flex;
position: absolute;
left: 0;
.item{
display: inline-block;
margin-left: 20px;
flex-shrink: 0;
&:hover{
cursor: pointer;
}
}
.active{
color: dodgerblue;
}
}
}
}
</style>
实现菜单过多滑动显示效果
最新推荐文章于 2024-04-11 20:40:32 发布