vue3 横向溢出内容自动生成滚动条

在 Vue3 中，如果你遇到了元素内容横向溢出并且需要显示滚动条的情况，通常可以使用 CSS 来控制。你可以通过设置 `overflow-x` 属性来启用水平滚动条。这里是一个简单的示例：

<div class="scrollable-container" v-bind:class="{ overflowX: showHorizontalScrollbar }">
  <!-- 这里是你的内容 -->
</div>

<style>
.scrollable-container {
  width: 200px; /* 或者你需要的宽度 */
  white-space: nowrap; /* 防止换行 */
  overflow-x: auto; /* 当内容超出容器宽度时显示水平滚动条 */
}

/* 可以添加一个样式用于显示滚动条时 */
.overflowX {
  scrollbar-width: thin; /* 更改滚动条宽度 */
  scrollbar-color: rgba(0, 0, 0, .5) lightgrey; /* 颜色样式 */
}
</style>

<script setup>
import { ref } from 'vue';

const showHorizontalScrollbar = ref(false);
// 根据需求动态切换滚动条显示与否
// 例如，当内容长度超过容器宽度时，设置为 true
showHorizontalScrollbar.value = yourContentLength > containerWidth;
</script>

在这个例子中，`.scrollable-container` 是一个包含你内容的容器，`overflow-x: auto` 开启了水平滚动条。通过 `v-bind:class` 绑定到 `showHorizontalScrollbar` 的值，可以根据需要动态改变是否显示滚动条。