vue实现tag 标签内容过长添加左右按钮进行滑动

我是陈大大

已于 2023-04-28 10:10:36 修改

阅读量2.7k

点赞数 2

CC 4.0 BY-SA版权

文章标签：笔记

于 2023-04-27 18:49:30 首次发布

本文链接：https://blog.youkuaiyun.com/cdd9527/article/details/130366785

文章展示了如何在Vue.js应用中创建一个标签列表，用户可以通过点击箭头使标签左右移动。移动距离基于盒子和内容的宽度计算，当达到边界时会自动切换到第一或最后一个标签。此外，还使用了事件监听来处理标签的显示和隐藏状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击箭头，标签内容可左右移动，每次移动一个盒子的宽度，若数据长度不够则移动到最有一个(或者第一个的位置)

<template> 中的代码

<div class="tags-list" ref="totalLists">
  <div class="arrow-icon" @click="arrowBack" v-if="showButton">
    <svg-icon
      :icon-class="'arrow-back'"
      class="icon arrow-style"
    ></svg-icon>
  </div>
  <div class="tag-style" ref="tagBox">
    <div
      class="scrollWrapper"
      ref="scrollWrapper"
      id="nav"
      :style="{ marginLeft: tabScroll }"
    >
      <el-tag
        v-for="(tag, index) in tagsList"
        :key="tag.name"
        :closable="tag.del"
        @close="handleTagsClose(tag, index)"
        @click="highTags(tag, index)"
        :class="index == currentTagIndex ? 'highStyle' : 'normalStyle'"
        type="info"
      >
        {{ tag.name }}
      </el-tag>
    </div>
  </div>
  <div class="arrow-icon" @click="arrowForward" v-if="showButton">
    <svg-icon
      :icon-class="'arrow-forward'"
      class="icon arrow-style"
    ></svg-icon>
  </div>
</div>

data 中的数据

data() {
  return {
    tabScroll: "0px", // 移动的距离
    tagsList: [
      {
        name: "工作台",
        path: "workbench",
        del: false,
      },
      {
        name: "工作台",
        path: "workbench",
        del: false,
      },
      {
        name: "工作台",
        path: "workbench",
        del: false,
      }
    ],
    showButton: false, // 标签左右两侧箭头是否显示
    swiperScrollWidth: 0, // 盒子的宽度
    swiperScrollContentWidth: 0, // 内容的宽度
  };
}

mounted 中添加监听的代码

window.addEventListener("resize", this.checkButtonStatus);

methods 中的方法

// 标签向左切换
arrowBack() {
  let tabBoxWidth = this.$refs.tagBox.clientWidth; //盒子宽度
  let offsetLeft = Math.abs(this.$refs.scrollWrapper.offsetLeft); //移动距离
  if (offsetLeft > tabBoxWidth) {
    //移动距离大于父盒子宽度，向前移动一整个父盒子宽度
    this.tabScroll = offsetLeft + tabBoxWidth + "px";
  }else {
    this.tabScroll = "0px";// 否则移动到开始位置
  }
},
// 标签向右切换
arrowForward() {
  let tabBoxWidth = this.$refs.tagBox.clientWidth; //盒子宽度
  let scrollWidth = this.$refs.scrollWrapper.scrollWidth; //内容宽度
  // 必须要在循环的父级添加 定位样式, offsetLeft 获取元素相对带有定位父元素左边框的偏移
  let offsetLeft = Math.abs(this.$refs.scrollWrapper.offsetLeft); //移动距离
  let diffWidth = scrollWidth - tabBoxWidth; //计算内容宽度与盒子宽度的差值
  if (diffWidth - offsetLeft > tabBoxWidth) {
    //判断差值减去移动距离是否大于盒子宽度 大于则滚动已移动距离+盒子宽度
    this.tabScroll = -(offsetLeft + tabBoxWidth) + "px";
  }else {
    this.tabScroll = -diffWidth + "px"; //小于则移动差值距离
  }
},
checkButtonStatus() {
  if (!this.$refs.scrollWrapper) return;
  // 盒子的宽度
  let containerSize = this.$refs.tagBox.clientWidth;
  // 内容的宽度
  let navSize = this.$refs.scrollWrapper.scrollWidth;
  if (containerSize > navSize || containerSize == navSize) {
    this.showButton = false;
  }else {
    this.showButton = true;
  }
},

.tags-list {
  margin: 4px 0;
  display: flex;
  align-items: center;
    .tag-style {
      display: flex;
      align-items: center;
      overflow: hidden;
      pointer-events: all;
      cursor: pointer;
      position: relative; // 必须添加该定位，offsetLeft 获取元素相对带有定位父元素左边框的偏移
      .scrollWrapper {
        display: flex;
        align-items: center;
        overflow-x: auto;
        transition:all 500ms linear
      }
      .scrollWrapper::-webkit-scrollbar {
        height: 0;
      }
      .el-tag {
        height: 32px;
        margin-right: 4px;
        cursor: pointer;
      }
      .el-tag.el-tag--info {
        background: #fff;
        color: $text-color;
      }
      .highStyle {
        color: #1890FF !important;
        font-size: 14px;
        font-weight: 400;
        padding: 0 16px;
      }
      .normalStyle {
        font-size: 14px;
        font-weight: 400;
        padding: 0 16px;
      }
    }
  .arrow-icon {
    width: 32px;
    height: 32px;
    pointer-events: all;
    cursor: pointer;
      .arrow-style {
        font-size: 16px;
        padding: 0 8px;
        position: relative;
        top: 8px;
      }
   }
}