用vue2写一个不会消失的横向滚动条

好的，我可以为您提供一些代码示例。

您可以使用 Vue.js 中的指令 v-bind 和 v-on 来实现滚动条效果。

首先，在您的 HTML 模板中，您需要添加一个包含所有内容的 DIV，并将其添加到父 DIV 中，如下所示：

<div class="parent">
  <div class="content" v-bind:style="{ width: contentWidth + 'px' }" ref="content">
    <!-- 这里是您的所有内容 -->
  </div>
</div>

接下来，您需要在您的 Vue 实例中添加以下代码：

data: {
  contentWidth: 0,
  parentWidth: 0,
  scrollPosition: 0,
},
mounted() {
  this.contentWidth = this.$refs.content.scrollWidth;
  this.parentWidth = this.$el.clientWidth;
},
computed: {
  showScrollbar() {
    return this.contentWidth > this.parentWidth;
  },
  scrollbarStyle() {
    const percentage = (this.scrollPosition / (this.contentWidth - this.parentWidth)) * 100;
    return { width: percentage + '%' };
  },
},
methods: {
  handleScroll(event) {
    this.scrollPosition = event.target.scrollLeft;
  },
},

最后，在您的 HTML 模板中，您需要添加以下代码：

<div class="parent" v-on:scroll="handleScroll">
  <div class="content" v-bind:style="{ width: contentWidth + 'px' }" ref="content">
    <!-- 这里是您的所有内容 -->
  </div>
  <div class="scrollbar" v-if="showScrollbar" v-bind:style="scrollbarStyle"></div>
</div>

现在，您应该已经成功地创建了一个横向滚动条。请记得根据您的样式需求来正确编写 CSS。