点击左右滚动

<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>