<template>
<div class="container">
<div class="icon-left common" @click="preOrNextClick(false)">
<LeftOutlined />
</div>
<div class="scroll">
<div class="tabs" ref="tabsRef">
<template v-for="item in agentSidebarActions" :key="item">
<div class="item" @click="handlerItemClick(item)">
{{ item.title }}
</div>
</template>
</div>
</div>
<div class="icon-right common" @click="preOrNextClick(true)">
<RightOutlined />
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, inject } from 'vue';
import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
import Chat from '/@/views/chat/framework/chat';
import { AgentSidebarActionsType } from '/@/views/chat/types/types';
const chat: Chat = inject<Chat>('chat') as Chat;
const agentSidebarActions: AgentSidebarActionsType[] = chat.config.agentSidebarActions;
const tabsRef = ref();
let stop = ref();
let posIndex = ref(0);
let totalWidth = ref();
let clientWidth = ref();
let scrollWidth = ref();
const preOrNextClick = (isRight: Boolean) => {
if (isRight && scrollWidth.value <= clientWidth.value) return;
if (isRight && stop.value) return;
let newIndex = isRight ? posIndex.value + 1 : posIndex.value - 1;
const ele = tabsRef.value.children[newIndex];
if (!ele) return;
const eleOffsetLeft = ele.offsetLeft;
tabsRef.value.style.transform = `translate(-${eleOffsetLeft}px)`;
posIndex.value = newIndex;
if (totalWidth.value < eleOffsetLeft) {
stop.value = true;
} else {
stop.value = false;
}
};
onMounted(() => {
clientWidth.value = tabsRef.value.clientWidth;
scrollWidth.value = tabsRef.value.scrollWidth;
totalWidth.value = scrollWidth.value - clientWidth.value;
});
const emits = defineEmits(['itemClick']);
const handlerItemClick = (item) => {
emits('itemClick', item);
};
</script>
<style lang="less" scoped>
.container {
position: relative;
width: 100%;
padding: 0px 30px;
}
.scroll {
overflow: hidden;
}
.tabs {
display: flex;
transition: transform 250ms ease;
&::-webkit-scrollbar {
display: none;
}
.item {
padding: 5px 10px;
margin-right: 10px;
white-space: nowrap;
background-color: #fff;
border: 1px solid #ddd;
font-size: 12px;
border-radius: 10px;
cursor: pointer;
}
}
.icon-left {
left: 0px;
top: 0px;
}
.icon-right {
right: 0px;
top: 0px;
}
.common {
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
position: absolute;
&:hover {
background-color: #ddd;
color: #ed8936;
border-radius: 5px;
}
}
</style>
点击左右滚动
最新推荐文章于 2024-08-22 14:32:34 发布