vue 实现鼠标滚轮滚动带多列文字有标题的文字栏

可以通过使用 Vue.js 和 CSS 来实现一个带多列文字和标题的文字栏，并且支持鼠标滚轮滚动。

首先，你可以创建一个 Vue 组件，包含多列文本和标题。然后，在 CSS 中，你可以使用 Flexbox 布局来实现多列布局，并使用 overflow 属性来启用滚动条。

以下是示例代码：

<template>
  <div class="text-column">
    <div class="title">{{ title }}</div>
    <div class="text-container">
      <div class="column">{{ column1 }}</div>
      <div class="column">{{ column2 }}</div>
      <div class="column">{{ column3 }}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
    column1: String,
    column2: String,
    column3: String
  }
};
</script>

<style>
.text-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: scroll;
  height: 300px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.text-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
}

.column {
  width: calc(33.33% - 10px);
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
</style>

在上面的代码中，我们使用 props 属性来传递标题和每个列的文本内容。我们使用 Flexbox 布局来创建多列布局，并使用 overflow 属性来启用垂直滚动条。我们还设置了标题和列的样式。

你可以在使用此组件时将其导入到你的 Vue 应用程序中，并传递必要的 props 属性，如下所示：

<template>
  <div>
    <text-column
      title="My Text Column"
      column1="Column 1 Text"
      column2="Column 2 Text"
      column3="Column 3 Text"
    />
  </div>
</template>

<script>
import TextColumn from "@/components/TextColumn.vue";

export default {
  components: {
    TextColumn
  }
};
</script>

通过这种方式，你就可以创建一个带有多列文本和标题的滚动文字栏。当你使用鼠标滚轮时，它会滚动并显示隐藏的文本。