Vue3 中 Tag 视图容器的完美滚动：无需滚动条，左右按钮掌控一切

2023-10-24 20:01:44

在日常开发中，我们经常会遇到这样的场景：在一个容器中展示一系列标签，当标签数量较多时，需要通过左右滚动来查看全部内容。然而，传统的滚动条往往会占用一定的空间，影响美观性。为了解决这个问题，我们可以使用 CSS 隐藏滚动条，并通过按钮来控制滚动。

在 Vue3 中，我们可以使用<tag-view>组件来实现这样的功能。<tag-view>组件是一个基于 Vue3 的标签页组件，它提供了丰富的 API 和选项，可以满足各种业务需求。

首先，我们需要在<tag-view>组件中隐藏滚动条。我们可以使用以下 CSS 代码：

.tag-view {
  overflow: hidden;
}

隐藏滚动条后，我们需要使用按钮来控制滚动。我们可以使用 Vue3 的<button>组件来实现按钮。<button>组件提供了丰富的事件，我们可以使用这些事件来触发滚动操作。

<template>
  <div class="tag-view-container">
    <button @click="scrollLeft()" class="left-button">
      <svg>...</svg>
    </button>
    <button @click="scrollRight()" class="right-button">
      <svg>...</svg>
    </button>
    <tag-view class="tag-view">
      <template v-for="tag in tags" :key="tag.id">
        <tag-item>{{ tag.name }}</tag-item>
      </template>
    </tag-view>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const tags = ref([])

    const scrollLeft = () => {
      // 滚动到左边
    }

    const scrollRight = () => {
      // 滚动到右边
    }

    return {
      tags,
      scrollLeft,
      scrollRight
    }
  }
}
</script>

在<script>中，我们使用ref定义了一个tags数组，用于存储标签数据。scrollLeft()和scrollRight()方法分别用于向左和向右滚动。

滚动操作可以通过多种方式实现，例如使用 DOM 的scrollLeft和scrollTop属性，或者使用第三方库（如 ScrollMagic）。具体实现方式取决于具体的业务需求和技术栈。

为了控制左右按钮的显隐，我们可以根据<tag-view>组件的内容宽度和容器宽度来计算。如果内容宽度大于容器宽度，则显示左右按钮；否则隐藏左右按钮。

<script>
import { ref, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    const tags = ref([])
    const contentWidth = ref(0)
    const containerWidth = ref(0)
    const showLeftButton = ref(false)
    const showRightButton = ref(false)

    const updateButtonStatus = () => {
      if (contentWidth.value > containerWidth.value) {
        showLeftButton.value = true
        showRightButton.value = true
      } else {
        showLeftButton.value = false
        showRightButton.value = false
      }
    }

    onMounted(() => {
      // 获取内容宽度和容器宽度
      contentWidth.value = document.querySelector('.tag-view').scrollWidth
      containerWidth.value = document.querySelector('.tag-view-container').clientWidth

      // 更新按钮状态
      updateButtonStatus()

      // 监听内容变化
      document.querySelector('.tag-view').addEventListener('scroll', updateButtonStatus)
    })

    onUnmounted(() => {
      // 移除监听器
      document.querySelector('.tag-view').removeEventListener('scroll', updateButtonStatus)
    })

    return {
      tags,
      showLeftButton,
      showRightButton
    }
  }
}
</script>