vue 里实现文本超出时点击左右按钮滚动?

Vue 中实现文本溢出时可以通过以下步骤完成左右滚动效果：

1. 在 HTML 中定义包含文本的容器，并为其添加样式以限制其宽度和高度。例如：

<div class="text-container">你好，这是一条需要滚动的文本，可以尝试点击左右滚动。</div>

.text-container {
  width: 300px;
  height: 50px;
  overflow: hidden;
}

2. 在容器内添加一个具有 `absolute` 定位的子元素，以允许其固定位置且不会超出容器边界。例如：

<div class="text-container">
   <div class="text-content">你好，这是一条需要滚动的文本，可以尝试点击左右滚动。</div>
</div>

.text-container {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
}
.text-content {
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 0;
}

3. 通过计算文本和容器之间的差异，确定文本是否溢出。如果是，则在容器中添加左右滚动按钮，可以根据按钮的点击事件改变 `text-content` 的 `left` 属性。例如：

<template>
  <div class="text-container">
    <div class="text-content" :style="{ left: contentLeft + 'px' }" ref="textContent">
      {{ text }}
    </div>
    <div class="left-arrow" v-if="isOverflow" @click="scrollLeft"><<</div>
    <div class="right-arrow" v-if="isOverflow"  @click="scrollRight">>></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: '你好，这是一条需要滚动的文本，可以尝试点击左右滚动。',
      contentWidth: 0,
      containerWidth: 0,
      contentLeft: 0
    };
  },
  mounted() {
    this.contentWidth = this.$refs.textContent.scrollWidth;
    this.containerWidth = this.$el.offsetWidth;
  },
  computed: {
    isOverflow() {
      return this.contentWidth > this.containerWidth;
    }
  },
  methods: {
    scrollLeft() {
      this.contentLeft += 20;
    },
    scrollRight() {
      this.contentLeft -= 20;
    }
  }
};
</script>

<style>
.text-container {
  width: 300px;
  height: 50px;
  position: relative;
  overflow: hidden;
  border: 1px solid #ccc;
}
.text-content {
  position: absolute;
  white-space: nowrap;
  top: 0;
  left: 0;
}
.left-arrow,
.right-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background-color: #ccc;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  cursor: pointer;
}

.left-arrow {
  left: 0;
}
.right-arrow {
  right: 0;

}
</style>

这样，当文本溢出时，就可以在容器中添加左右滚动按钮，通过按钮的点击事件滚动文本内容了。